JSFiddle - React, Tailwind, and code Playground

by panique

HTML

<div class="balloon">

    <div class="arrow_shadow"></div>    
    <div class="arrow"></div>    
    deutsch<br/>
    english<br/>
    pyccknn<br/>
</div>

CSS

.balloon {  
        background: #fff;  
    border:1px solid #ccc;
      
        border-radius: 4px;  
        -moz-border-radius: 4px;  
        -webkit-border-radius: 4px;  
      
        padding: 10px;  
        position: relative;  
        font-size: 12px;  
    width:40px;
        text-align: center;  
        color: #3a3a3a;  
    
    margin:50px;
    }  
      
    .balloon .arrow {  
        border-color: transparent transparent #fff transparent;  
        border-style: solid;  
        border-width: 5px;  
        display: block;  
        height: 0;  
        left: 25px;  
        position: absolute;  
        top: -10px;  
        width: 0;  
    }  

    .balloon .arrow_shadow {  
        border-color: transparent transparent #CCCCCC transparent;  
        border-style: solid;  
        border-width: 5px;  
        display: block;  
        height: 0;  
        left: 25px;  
        position: absolute;  
        top: -11px;  
        width: 0;  
    }