JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<div id="link">
<div>
<div id="parent">
    <div class="likes-tooltip-arrow"></div>
    <div id="title">Оценили 9 пользователей</div>
    <div id='container'>
        <div></div>
        <div>9</div>
        <div><a href="/users/nikilona">
                <img src="http://static.rubuki.com/userpics/000/014/140/000014140.jpg">
               </a></div>
        <div><a href="/users/glayt">
                <img src="http://static.rubuki.com/userpics/000/028/706/000028706.jpg">
               </a></div>
        <div><a href="/users/loveone96">
                <img src="http://static.rubuki.com/userpics/000/031/189/000031189.jpg">
               </a></div>
        <div><a href="/users/Katrine99">
                <img src="http://static.rubuki.com/userpics/000/031/697/000031697.jpg">
               </a></div>
        <div><a href="/users/nikilona">
                <img src="http://static.rubuki.com/userpics/000/014/140/000014140.jpg">
               </a></div>
        <div><a href="/users/glayt">
                <img src="http://static.rubuki.com/userpics/000/028/706/000028706.jpg">
               </a></div>
        <div><a href="/users/loveone96">
                <img src="http://static.rubuki.com/userpics/000/031/189/000031189.jpg">
               </a></div>
        <div><a href="/users/Katrine99">
                <img src="http://static.rubuki.com/userpics/000/031/697/000031697.jpg">
               </a></div>
        <div></div>
    </div>
</div>
            </div>
    <a href="">test</a>
         
            </div>

CSS

div#container {
    float:left;
    /* width:100px; */
}
div#title {
    float:none;
}
div#container > div {
    float:left;
    height:24px;
    /* width:30px; */
    margin:2px;
}
div#container > div >a >img{
    width:24px;
    height:24px;
}
div#container>div:first-child{
    background: url(http://s.rubuki.com/assets/like_post_big-58fc83c6c04bb4bcd8a303babfd22247.png) -27px -54px    no-repeat;
    width:24px;
}
div#container>div:nth-child(2){
    line-height:24px;
}
div#parent {
    display:none;
    position: absolute;
    background:yellow;
    bottom:25px;
    left:-150px;
    padding:10px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    padding: 10px;
    float: left;
    font: bold 12px Arial;
}
.likes-tooltip:not(:visible) + div.likes-tooltip-arrow{
display:none;
}
div#link{
    position:absolute;
    left:200px;
    top:300px;
}
div#link:hover div#parent{
    display:block;
}
.likes-tooltip-arrow {
background: url(http://rubuki.com/assets/like-dislike-tooltip-corner.png) no-repeat center transparent;
width: 10px;
height: 5px;
padding: 0;
margin: 0;
left: 50%;
position: relative;
    position: absolute;
bottom: -5px;
}
div#link>div{
    width:300px;
}