JSFiddle - React, Tailwind, and code Playground

by sibin va

HTML

<div id="menu" class="menu">
  <ul class="headlines">
    <li id="item1"onclick="checklist(this)">a</li>
    <li id="item2">s  </li>
    <li id="item3">d  </li>
    <li id="item4">d  </li>
    <li id="item5">F  </li>
    <li id="item6">Ta </li>
    <li id="item7">s  </li>
  </ul>
</div>

CSS

.menu{
  width:100%;  
  position: relative;
  border-style:none;   
 
}
.headlines{
   margin:0px auto;
}
.headlines li{
  width:150px;
  margin:0px auto;
  transition: opacity .8s, width .8s ease-out;
  -moz-transition: opacity .8s, width .8s ease-out;
  -webkit-transition: opacity .8s, width .8s ease-out;
  -o-transition: opacity .8s, width.8s ease-out;
   position:relative;
}

.permahover{
  opacity: 1;
  width:100% !important;
   
  
}

JavaScript

$("#menu li").on("click", function () {
  $(this).addClass('permahover');
})