JSFiddle - React, Tailwind, and code Playground

by surfjam

HTML

<div id="wrap-a">
    <div id='tss'>
        <div class='tss-social'>
            A
        <div class='tss-content'>99</div>
        </div>
        <div class='tss-social'>
            B
            <div class='tss-content'>99</div>
        </div>
        <div class='tss-social'>
            C
            <div class='tss-content'>99</div>
        </div>
        <div class='tss-social'>
            D
            <div class='tss-content'>99</div>
        </div>
    </div>
</div>

CSS

#tss {
    position: absolute;
    z-index: 9999; 
    width: 48px;
    left: -22px;
    top: 30px;
    padding: 4px 0;
    background: grey;
}

.tss-social {
    position: relative;
    z-index: 99999;
    margin: 0 auto 2px;
    height: 38px;
    width: 38px;
    text-align: center;
    color: white;
    line-height: 2.2;
    background: red;
}

.tss-content {
    position: absolute;
    z-index: 999;
    margin: 0;
    top: 3px;
    height: 28px;
    background: white;
    width: 40px;
    right: -5px;
    line-height: 2.8;
    border-right: solid 2px grey;
    border-top: solid 2px grey;
    border-bottom: solid 2px grey;
    font-size: 10px;
    color: black;
}


#wrap-a {
    position: relative;
    z-index: 10;
    width: 400px;
    Height: 250px; 
    margin: 10px auto;
    background: lightblue;
}