JSFiddle - React, Tailwind, and code Playground

by abdallha dagga

HTML

<ul class="mh-menu">
    <li>
        <a href="#">
            <span>name</span> 
            <span>abdallha</span>
        </a>
        <img src="http://im59.gulfup.com/aiOkEy.jpg" alt="image01"/>
    </li>
    <!-- ... -->
    <li>
        <a href="#">
           <span>name</span> 
            <span>abdallha</span>
        </a>
        <img src="http://im59.gulfup.com/eeLzGB.jpg" alt="image01"/>
    </li>
     <li>
        <a href="#">
             <span>name</span> 
            <span>abdallha</span>
        </a>
        <img src="http://im59.gulfup.com/aiOkEy.jpg" alt="image01"/>
    </li>
    <!-- ... -->
    <li>
        <a href="#">
            <span>name</span> 
            <span>abdallha</span>
        </a>
        <img src="http://im59.gulfup.com/eeLzGB.jpg" alt="image01"/>
    </li>
   
 

</ul>

CSS

.mh-menu li:hover a{
    background-color: rgba(174,54,55,0.9);
}

.mh-menu li a span:nth-child(2){
    
    /*...*/
    display: block;
    transition: color 0.2s linear;
}

.mh-menu li img{
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
    left: 350px;
    opacity: 1;
}
.mh-menu li a {
    color: #333;
text-decoration: none;
    list-style: none;
display: block;
width: 280px;
padding: 0px 10px;
text-align: left;
position: relative;
z-index: 10;
height: 97px;
border-right: 1px solid #ddd;
background: rgba(255,255,255, 0.8);
}
ol, ul {
    list-style: none;
}