JSFiddle - React, Tailwind, and code Playground

by Aleksandr Zidyganov

HTML

<div class="balloon">
  <span class="arrow"><i></i></span>
</div>
<br>
<br>
<br>
<br>
<div class="balloon">
  <span class="arrow2"><i></i></span>
</div>

CSS

body{background:#2c2c2c; padding: 20px;}

.balloon{ 
    display:block; 
    position:relative;
    width:200px; height:60px; 
    background:#eeeeee; padding:10px;
    border: 1px solid #b3b5c7;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        -moz-box-shadow: 0 1px 4px #d8dbe0;
        -webkit-box-shadow: 0 1px 4px #d8dbe0;
        box-shadow: 0 1px 4px #d8dbe0;  
    background-image: -moz-linear-gradient(bottom, #ededed 0%, #ededed 0.27%, #fcfcfc 100%);
        background-image: -o-linear-gradient(bottom, #ededed 0%, #ededed 0.27%, #fcfcfc 100%);
        background-image: -webkit-linear-gradient(bottom, #ededed 0%, #ededed 0.27%, #fcfcfc 100%);
        background-image: linear-gradient(bottom, #ededed 0%, #ededed 0.27%, #fcfcfc 100%);
}
    .balloon .arrow{
        position:absolute; 
        left:0px; 
        top:0%;
        margin-top:-8px;
        display:block;
        width: 20px;
        height: 20px;
        z-index: 25;
    overflow: hidden;
    }

 .balloon .arrow i{
 
z-index:20;        
    position:absolute; right:0; top:0; margin-top:0;
        display:block;
        width: 0px;
        height: 0px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid red;
}

.arrow:before, .arrow:after
{
  z-index: -1;
  position: absolute;
  content: "";
  top: 0;
  left: 10px;
  width: 10px;
  background: #b3b5c7;
  -webkit-box-shadow: 0 0 6px #777;
  -moz-box-shadow: 0 0 6px #777;
  box-shadow: 0 0 6px #777;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
    height: 10px;
}
.arrow:after
{
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
  right: -14px;
  left: auto;
    top:0;
}


/*arrow2*/
    .balloon .arrow2{
        position:absolute; 
        left:50%; 
       ...