JSFiddle - React, Tailwind, and code Playground

by shimmy

HTML

<div style="position:absolute;top:50px;">
    <div class="tooltip">
        <span>Press CTRL-C to copy</span>
        <span class="arrow"/>
    </div>
 
</div>

CSS

.tooltip{
background-color: #2D2D2D;
outline: 1px solid rgba(255, 255, 255, 0.5);
position: absolute;
text-align: center;
    padding: 0px 7px;
top: -28px;
z-index: 99;
user-select: none;
-webkit-user-select: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 3px;
    box-shadow
}
.tooltip span{
color: white;
font-family: arial, sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 29px;
text-align: center;
}
.tooltip:after{
border-bottom: transparent;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #2D2D2D;
bottom: -5px;
left: 65px;
outline: none;
margin: 0 0 0 -5px;
position: absolute;
}