JSFiddle - React, Tailwind, and code Playground

HTML

<div class="t3">третий тултип</div>

CSS

html, body{
margin:0;
padding:0;
height:100%;
text-align:center;
}

body{
padding:50px 0px 0px;
background:url(http://alpatriott.ru/images/fon.png);
}

:focus{
outline:none;
}

div{
position:relative;
display:inline-block;
padding:10px;
min-height:30px;
min-width:100px;
font-family:'Trebuchet MS';
margin-right:30px;
text-align:left;
}

div:before, div:after{
content:'';
position:absolute;
}

.t1{
border-radius:10px;
background:#efefef;
border:1px solid #777;
}

.t1:before{
bottom:-5px;
left:10px;
width:20px;
height:10px;
-webkit-transform:rotate(-30deg) skewX(-45deg);
-moz-transform:rotate(-30deg) skewX(-45deg);
-o-transform:rotate(-30deg) skewX(-45deg);
-ms-transform:rotate(-30deg) skewX(-45deg);
background:#efefef;
z-index:-1;
border:1px solid #777;
}

.t1:after{
left:13px;
bottom:-1px;
width:15px;
height:1px;
background:#efefef;
}

.t2{
background:#333;
border-radius:5px;
color:#ccc;
}

.t2:before{
left:10px;
bottom:-10px;
width:0px;
height:0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #333;
}

.t3{
border-radius:10px;
background:#efefef;
border:1px solid #ccc;
box-shadow:0px 5px 5px 0px #777;
}

.t3:before{
bottom:-4px;
right:10px;
width:20px;
height:10px;
-webkit-transform:rotate(30deg) skewX(45deg);
-moz-transform:rotate(30deg) skewX(45deg);
-ms-transform:rotate(30deg) skewX(45deg);
-o-transform:rotate(30deg) skewX(45deg);
background:#efefef;
z-index:1;
box-shadow:4px 5px 5px 0px #777;
}

.t3:after{
right:13px;
bottom:-1px;
width:15px;
height:1px;
background:#efefef;
border-radius:1px;
box-shadow:0px 0px 1px 0px #fff;
}


.t4{
border-radius:10px;
background: #b5bdc8;
background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b));
background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%);
background: -o-linear-gradient(top,  #b5bdc8...