JSFiddle - React, Tailwind, and code Playground

by Beardy

HTML

<span class="tooltip">Welcome!!!</span>

CSS

span.tooltip {
      position: absolute;
      width: 100px;
      height: 20px;
      line-height: 20px;
      padding: 10px;
      font-size: 14px;
      text-align: center;
      color: rgb(255,255,255);
      background: rgba(0, 0, 0, 0.8);
      border: 0px solid rgba(0, 0, 0, 0.4);
      border-radius: 0px;
      text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
      box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px;
}

span.tooltip:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: rgba(0,0,0,0.8) transparent transparent transparent;
      top: 40px;
      left: 50px;
}