JSFiddle - React, Tailwind, and code Playground

by Saurabh Sonawane

HTML

<div class="wrapper">

    <!-- tooltip arrow / pointer -->
    <div class="tooltip-arrow">
        <div></div>
    </div>
    
    <!-- tooltip top border -->
    <div class="tooltip-top">
       <div class="line1"></div>
       <div class="line2"></div>
       <div class="line3"></div>
    </div>
    
    <!-- tooltip -->
    <p class="tooltip">Here is my tooltip</p>

</div>

CSS

body{
  padding:30px;
  background:#111111;
}

.wrapper{
  position:relative;
  display:block;
  width:400px;
}

.tooltip-arrow { 
  position: relative;
  margin-left: 30px;
  width: 30px;
  margin-top:20px;
}
       
.tooltip-arrow>div:before,
.tooltip-arrow>div:after{
  content: " ";
  display: block;
  width: 29px;
  height: 2px;
  background:#FFFFFF;
  position: absolute;
  top: -12px;
}
.tooltip-arrow>div:before {
  -webkit-transform: rotate(56deg);
     -moz-transform: rotate(56deg);
      -ms-transform: rotate(56deg);
          transform: rotate(56deg);
  right: -7px;
}
.tooltip-arrow>div:after {
  -webkit-transform: rotate(-56deg);
     -moz-transform: rotate(-56deg);
      -ms-transform: rotate(-56deg);
          transform: rotate(-56deg);
  left: -7px;
}

.tooltip-top{
  width:100%;
  display:block;
  height:2px;
  background:none;
  margin-bottom:0px;
}
.tooltip-top .line1{
  background:#FFF;
  width:30px;
  display:block;
  float:left;
  height:100%;
}
.tooltip-top .line2{
  background:none;
  width:30px;
  display:block;
  height:100%;
  float:left;
}
.tooltip-top .line3{
  background:#FFF;
  width: calc(100% - 60px);;
  display:block;
  height:100%;
  float:left;
}

.tooltip {
  position:relative;
  padding:15px;
  border:2px solid #FFFFFF;
  border-top:none;
  color:#FFFFFF;
  margin-top:0px;
}