JSFiddle - React, Tailwind, and code Playground

by bohdantheone

HTML

<div id="admin_control">
<a href="admin/images" class="bar">
<div class="pinner">Simple text</div>
<div class="adm_block">
</div></a>
<a href="admin/images" class="bar">
<div class="pinner">Simple text</div>
<div class="adm_block">
</div></a>
<a href="admin/images" class="bar">
<div class="pinner">Simple text</div>
<div class="adm_block">
</div></a> 
<a href="admin/images" class="bar">
<div class="pinner">Simple text</div>
<div class="adm_block">
</div></a>    
</div>

CSS

a.bar > .pinner {display:none;}
    a.bar:hover > .pinner {display:block;}
    
    a.bar
    {
       position: relative;
       z-index:5; 
    }
    
    .pinner
    {
        position: absolute;
        top:239px;
        left:15px;      
        width:244px;
        text-align:center;
        color:#fff;
        height:20px;
        background: #E16130;
        z-index:10;
        margin: 0;
        
}

.adm_block
{
    border: 2px solid #828282;
    text-align:center;
    float:left; 
    width:220px; 
    height: 220px;
    margin: 15px 15px;
    padding:10px;
    position: relative;
    background: #ccc;
    
}