JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<ul>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
      <li><a href="#">teste</a></li>
    </ul>

CSS

ul{
	width: 500px;
	margin: 0;
	padding: 0;
    background-color: #e34444;
    font: 13px Verdana, sans-serif;
}
li a{
    display: block;
    color: #fff;
    padding: .5em;
    text-align: center;
    -moz-transition: background-color .3s ease-in;
    -webkit-transition: background-color .3s ease-in;
    -o-transition: background-color .3s ease-in;
    transition: background-color .3s ease-in;
}
li a:hover{
	background-color: #ac2424;
    color: #fff;
    -moz-transition: background-color 0.01s;
    -webkit-transition: background-color 0.01s;
    -o-transition: background-color 0.01s;
    transition: background-color 0.01s;
}