JSFiddle - React, Tailwind, and code Playground

by abude

HTML

<div class="wb-tooltip wb-tooltip-right">Hi there!</div>

CSS

.wb-tooltip {
   width: 200px;
   height: 80px;
   background: #414141;
   position: relative;
   -moz-border-radius:    4px;
   -webkit-border-radius: 4px;
   border-radius:         4px;
}
.wb-tooltip:after{
  content: " ";
  height: 0;
  position: absolute;
  width: 0;
}
.wb-tooltip-bottom:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #414141 10px;
  bottom: -10px;
  left: 50%;
  margin-left: -13px;
}
.wb-tooltip-top:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-bottom: solid #414141 10px;
  top: -10px;    
  left: 50%;
  margin-left: -13px;
}

.wb-tooltip-left:after {
  border-top: solid transparent 10px;
  border-bottom: solid transparent 10px;
  border-right: solid #414141 10px;
  left: -10px;   
  top:35%;
}
.wb-tooltip-right:after {
  border-top: solid transparent 10px;
  border-bottom: solid transparent 10px;
  border-left: solid #414141 10px;
  right: -10px;   
  top:35%;
}