.tail::after {
    content: '';
    position: absolute;
    bottom: 100%; /* Position the tail above the div */
    left: 10%; /* Adjust this value to position the tail */
    margin-left: -5px; /* Center the tail */
    border-width: 10px; /* Adjust for the size of the tail */
    border-style: solid;
    border-color: transparent transparent white transparent; /* Make the tail point down */
    border-radius: 6px 6px 0 0;
}


.tail-left::after {
    content: '';
    position: absolute;
    top: 50%; /* Position the tail in the middle vertically */
    left: -10px; /* Move the tail to the left side of the div */
    margin-top: -5px; /* Center the tail vertically */
    border-width: 10px; /* Adjust for the size of the tail */
    border-style: solid;
    border-color: transparent white transparent transparent; /* Make the tail point right */
    border-radius: 6px 0 0 6px; /* Round the left corners */
}