JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<!-- Первый ряд -->
<div class="items1">
    <div class="items">
        <a class="item" href="http://tmgame.ru/info/artinfo.php?id=147"><img src="http://tmgame.ru/files/art/147.gif?72782">
            <div class="info">
            подсказка 1.1
        </div></a>
        
    </div>
</div>
    
 <!-- Первый ряд -->
<div class="items1">
    <div class="items">
        <a class="item" href="http://tmgame.ru/info/artinfo.php?id=147"><img src="http://tmgame.ru/files/art/147.gif?72782">
            <div class="info">
            подсказка 1.1
        </div></a>
        
    </div>
</div><p>&nbsp;</p>
<p>&nbsp;</p>
 <!-- Первый ряд -->
<div class="items1">
    <div class="items">
        <a class="item" href="http://tmgame.ru/info/artinfo.php?id=147"><img src="http://tmgame.ru/files/art/147.gif?72782">
            <div class="info">
            подсказка 1.1
        </div></a>
        
    </div>
</div>
 
<!-- Первый ряд -->
<div class="items1">
    <div class="items">
        <a class="item" href="http://tmgame.ru/info/artinfo.php?id=147"><img src="http://tmgame.ru/files/art/147.gif?72782">
            <div class="info">
            подсказка 1.1
        </div></a>
        
    </div>
</div>

CSS

.items1 {
    float: left;
}
 
.items {
    width: 100%;
    height:100%;
}
 
.item {
    width: 53px;
    height: 53px;
    display:inline-block;
    position:relative;
}
.info {
    display:none;
    width: 400px;
    height: 200px;
    border-radius:5px;
    color: rgba(0, 0, 0, 1);
    box-shadow:0px 5px 5px 0px #777;
    background-image: radial-gradient(#DFDFDF, #ffffff);
    z-index: 2;
}
 
.item:hover .info  {
    display:block;
    position:absolute;
    left:0;
    top:100%;
}