JSFiddle - React, Tailwind, and code Playground

by iamanubhavsaini

HTML

<ul class="menu">
     <li class="anchors" title="click me I am a link" data-location="google.come"> link 1 </li>
     <li class="anchors" title="click me I am a link" data-location="google.come"> link 1 </li>  
<li class="anchors" title="click me I am a link" data-location="google.come"> link 1 </li>
     <li class="anchors" title="click me I am a link" data-location="google.come"> link 1 </li> 
        <li class="anchors" title="click me I am a link" data-location="google.come"> link 1 </li>
     <li class="anchors" title="click me I am a link" data-location="google.come"> link 1 </li> 

</ul>

CSS

ul li.anchors{
     text-decoration:underline;
     color:blue;
     list-style-type:none;
     display: block;
     margin:2px 4px;
     padding: 2px 4px;
    
    }
    
    ul li.anchors:hover{
     color:navy;
    cursor:pointer;
    }

ul li.anchors:hover::after{
     content: attr(data-location);
}