JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<nav>
 <ul>
     <li><a href="#">First</a></li>
     <li><a href="#">Second</a></li>
     <li><a href="#">Third</a></li>
 </ul>
</nav>

CSS

*{
	margin: 0px;
	padding: 0px;
}
a{
	text-decoration: none;
	color: #333;
}
nav{
	float: left;
	height: 50px;
	width: 100%;
	background-color: #CCC;
}
ul{
	list-style-type: none;
}

li{
	background-color:rgba(255,0,0,0.0);
	float: left;
	height: 30px;
	width: 80px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 1em;
	line-height: 30px;
	margin-right: 3px;
	text-align: center;
    -webkit-transition:background-color 1s;
    -moz-transition:background-color 1s;
    transition:background-color 1s;	
}

JavaScript

$('li').hover(function(){
	   $(this).css({'background-color':'rgba(255,0,0,1.0)'})
	   },function(){
	    $(this).css({'background-color':'rgba(255,0,0,0.0)'})   
	})