JSFiddle - React, Tailwind, and code Playground

by saomocari

HTML

<div>example</div>

CSS

div {
    width: 150px;
    min-height: 20px;
    position: absolute;
    top:50px;
    margin-left: 25px;
    padding: 5px;
    background: #ffffff;
    font-size:1em;
    text-align:center;
    /* ツールチップ角丸の装飾の指定 */
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari and Chrome */
    border-radius: 5px; /* Browsers that Support it like Opera */
 
    /* ツールチップボックスシャドウの装飾の指定 */
    -moz-box-shadow: 0 0 8px gray; /* Firefox */
    -webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */
    box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */
}
div:after {
    content:"\25B8"; 
    display:block;
    font-size:2em;
    height:0;
    line-height:0;
    position:absolute;
    color:#fff;
    bottom:-3px;
    left:1px;
    text-align:center;
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    width:100%;
    text-shadow: 3px 0 2px #ccc;
}