JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<ul id="menu">                 
<li><a href="http://lordhtml.blogspot.in/">Home</a></li>                                
<li><a href="http://lordhtml.blogspot.in/p/about-us.html">About</a></li>                 
<li><a href="http://lordhtml.blogspot.in/p/contact.html">Contact</a></li>    
<li><a href="http://lordhtml.blogspot.in/">Back To Tutorial</a></li>      
</ul>

CSS

#menu li {                 
display: inline;                 
list-style: none;                 
padding: 0;             
}                          
#menu li a {                                  
border: 1px solid #3d8bf2;                
padding: 15px 20px 15px 20px;                 
text-decoration: none;                 
font-family: arial;                 
color:#fff;                 
margin-left: -5px;                 
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG');                 
background-position: left;                 
-webkit-transition: all 0.7s ease-in-out;               
-moz-transition: all 0.7s ease-in-out;                 
-o-transition: all 0.7s ease-in-out;             
}                          
#menu li a:hover {                 
background-position:right;            
}