JSFiddle - React, Tailwind, and code Playground

by Ramkee Mukuru

HTML

<div class="container">
  <h3>Inline List</h3>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

CSS

.container{
  margin:auto;
  background-color:white;
  width:80%;
}


    li:hover{
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
   opacity: 0.8;
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0% 0%;
    cursor:pointer;
    }
    
    li{
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    .background-color:#ff6a26;
    cursor:pointer;
    }