JSFiddle - React, Tailwind, and code Playground

by karinafoto

HTML

<ul>
     <li><a href="#">Tutorial Blog </a></li>
         <li><a href="#">Css Code</a></li>
         <li><a href="#">Kode Warna</a></li>
         <li><a href="#">PhotoShop</a></li>
         <li><a href="#">Free Download</a></li>
 </ul>

CSS

ul {
   display: table;
   width: 700px;
 }
 li {
   display: table-cell;
   width: 20%;
   height: 25px;
   line-height: 25px;
   text-align: center;
   cursor: pointer;
   -webkit-transition: 0.3s ease-in-out;
   -moz-transition: 0.3s ease-in-out;border-radius:10px;
 }
 ul:hover li {
   width: 15%;
 }
 li:hover {
   width: 35% !important;
   opacity: 0.8;
 }
 ul li:nth-of-type(1) { background: #FF4C4C; }
 ul li:nth-of-type(2) { background: #FFBF49; }
 ul li:nth-of-type(3) { background: #444444; }
 ul li:nth-of-type(4) { background: #6FDC6F; }
 ul li:nth-of-type(5) { background: #3AADFE; }