JSFiddle - React, Tailwind, and code Playground

by prabhu5013

HTML

<div id="tt">
    fsgfgdfgdfgfdgfdgfdg
<ul class="nav">
  <li class="nav-item1">1111111<a href=""></a></li>
  <li class="nav-item2">2222222222<a href=""></a></li>
  <li class="nav-item3">333333333<a href=""></a></li>
  <li class="nav-item4">4444444444<a href=""></a></li>
</ul> 

</div>

CSS

div
{
    background-color: green;
width: 200px;
height: 200px;
position: absolute;
    color:white;
}
    
}

JavaScript

(function()
 {
     $("#tt").on("click",function(){ 
     $(this)
         .animate(
                     {           
                         'top':'100'
                     }
                 )
         .animate(
                     {           
                         'left':'100'
                     },{queue:true}
                 ) 
     .find('li')
         .css('color','red')
     .end()
     .find('li.nav-item3')
       .css('font-size','25px')
     .end()
     .css('font-size','45px')
 });
 }
)();