JSFiddle - React, Tailwind, and code Playground

by Denitz

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS3 tooltips with arrows</title>
</head>

<body>

    <div class="tooltip leftArrow">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis, felis a volutpat semper, leo erat sollicitudin tortor, eget vulputate elit erat sed eros. Donec diam nibh, mollis sit amet molestie vel, condimentum ut justo. Duis congue justo non enim ornare sed dapibus sapien elementum. Proin mollis tellus sit amet nibh luctus condimentum. Ut viverra orci nec erat feugiat vitae dictum neque aliquet.
    </div>
    
    <div class="tooltip rightArrow">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis, felis a volutpat semper, leo erat sollicitudin tortor, eget vulputate elit erat sed eros. Donec diam nibh, mollis sit amet molestie vel, condimentum ut justo. Duis congue justo non enim ornare sed dapibus sapien elementum. Proin mollis tellus sit amet nibh luctus condimentum. Ut viverra orci nec erat feugiat vitae dictum neque aliquet.
    </div>

    <div class="tooltip topArrow">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis, felis a volutpat semper, leo erat sollicitudin tortor, eget vulputate elit erat sed eros. Donec diam nibh, mollis sit amet molestie vel, condimentum ut justo. Duis congue justo non enim ornare sed dapibus sapien elementum. Proin mollis tellus sit amet nibh luctus condimentum. Ut viverra orci nec erat feugiat vitae dictum neque aliquet.
    </div>

    <div class="tooltip bottomArrow">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis, felis a volutpat semper, leo erat sollicitudin tortor, eget vulputate elit erat sed eros. Donec diam nibh, mollis sit amet molestie vel, condimentum ut justo. Duis congue justo non...

CSS

body {
    padding:100px;
}

/* Tooltip block */
.tooltip {
    font-size: 12px;
    color:#FFF;
    
    position:relative;
    width:300px;
    padding:20px;
    margin:20px;
    
    border: 1px solid #186F8F;
    
    -moz-border-radius:     15px;
    -webkit-border-radius:     15px;
    border-radius:             15px;
    
    background-color:#35acd7;

    background-image: -moz-linear-gradient(        #29A2CE 0%, #3ABAE6 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #29A2CE), color-stop(100%, #3ABAE6));
    background-image: -webkit-linear-gradient(    #29A2CE 0%, #3ABAE6 100%);
    background-image: -o-linear-gradient(        #29A2CE 0%, #3ABAE6 100%);
    background-image: -ms-linear-gradient(        #29A2CE 0%, #3ABAE6 100%);
    background-image: linear-gradient(            #29A2CE 0%, #3ABAE6 100%);
    
    -moz-box-shadow:    0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666;
    -webkit-box-shadow:    0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666;
    box-shadow:            0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666;
}

/* Common rules for all arrows */
.tooltip:before,
.tooltip:after {
    content:"\2666";
    font-family: monospace;
    font-size:50px;
    line-height:52px;
    text-align:center;
    
    position:absolute;
    overflow:hidden;
    width:50px;
    height:50px;

    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.tooltip:before {
    color:#186F8F;
}
.tooltip:after {
    color:#35acd7;
}


/* Left arrow */
.leftArrow:before,
.leftArrow:after {
    top:50%;
    left:-25px;
    margin-top:-25px;
    clip:rect(0px, 25px, 50px, 0px);
}
.leftArrow:before {
    -moz-text-shadow:    -4px 0px 6px #666;
    -webkit-text-shadow:-4px 0px 6px #666;
    text-shadow:        -4px 0px 6px #666;
}
.leftArrow:after {
    left:-24px;
}

/* Right arrow */
.rightArrow:before,
.rightArrow:after {
    top:50%;
    right:-25px;
    margin-top:-25px;
   ...