JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<div id="bubble">
   
</div>
<p>&nbsp;</p>

<!-- New HTML Code -->
<div class="arrow_box"></div>

CSS

/*NEW CSS Code*/
.arrow_box { 
    width: 200px;
    min-height: 100px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    position: relative;
} 

.arrow_box:after, .arrow_box:before 
{ 
    top: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; position: absolute; 
    pointer-events: none; 
} 
.arrow_box:after 
{  
 border-color: rgba(0,0,0,0.5) transparent transparent; 
 border-width: 30px; 
 margin-left: -30px; 
} 

/*-----------------Code provided by OP----------------*/
#bubble {
    width: 200px;
    min-height: 100px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    position: relative;
}

#bubble:after {
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -20px;
    border-style: solid solid none;
    border-width: 20px 20px 0;
    border-color: rgba(0,0,0,0.5) transparent transparent;
    content:"";
}