JSFiddle - React, Tailwind, and code Playground

HTML

<div class="callout left">test</div>

CSS

body {
     font-family: Helvetica;
     font-size: 13px;
   }
   
   div.callout {
     height: 20px;
     width: 130px;
     /*float: left;*/
     z-index: 1;
   }
   
   div.callout {
     background-color: #444;
     background-image: -moz-linear-gradient(top, #444, #444);
     position: relative;
     color: #ccc;
     padding: 20px;
     border-radius: 3px;
     box-shadow: 0px 0px 20px #999;
     //margin: 25px;
     min-height: 20px;
     border: 1px solid #333;
     text-shadow: 0 0 1px #000;
     /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
   }
   
   .callout::before {
     content: "";
     width: 0px;
     height: 0px;
     border: 0.8em solid transparent;
     position: absolute;
   }
   
 
   

   
   .callout.top::before {
     left: 0%;
     bottom: -20px;
     border-top: 11px solid #444;
   }
   
   .callout.bottom::before {
     left: 45%;
     top: -20px;
     border-bottom: 10px solid #444;
   }
   
   
   .callout.right::before {
     left: -20px;
     top: 40%;
     border-right: 10px solid #444;
   }
/*       .callout.left::after {
           right: -20px;
           top: 40%;
           border-left: 10px solid #444;
         }
       */   

/*
.callout.left::after {
     right: -20px;
     top: 40%;
     border-left: 10px solid #444;
}
*/  


.callout.left::before {
     right: -20px;
     top: 50%;
     transform: translateY(-50%);
     border-left: 10px solid #444;
}