JSFiddle - React, Tailwind, and code Playground

by karan shah

HTML

<div>Hover here<span>

<ul>  
    <li>mark</li>
    <li>john</li>
    <li>Katty</li>
</ul>

</span></div>

CSS

span{
    background:#F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    height: auto;
    letter-spacing: 1px;
    line-height: 30px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -80px;
    left:-30px;
    display:none;
    padding:0 20px;
    
}

div{
    margin:100px;
    float:left;
    position:relative;
    cursor:pointer;
}

div:hover span{
    display:block;
}