JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<ul class="tagline">
    <li>Hussain
    <ul class="rotated"> 
      <li>Foundation</li> 
      <li>JQuery</li> 
      <li>AJAX</li>
   </ul>
   </li>
    
    <li>Sufyan
<ul class="rotated"> 
      <li>WordPress</li> 
      <li>PHP</li>
      <li>MySQL</li>
    </ul>
   </li>

    
        <li>Haseeb
<ul class="rotated"> 
      <li>HTML</li> 
      <li>CSS</li>
      <li>Bootstrap</li>
    </ul>
   </li>

</ul>

CSS

.rotated {
    display: none;
}

ul li {
    display:inline-block;
}

.tagline li:hover > .rotated li {
    display:inline-block;
}

JavaScript

function run() {
    //$("li").click(function() {  
    var prev = $(".rotated li:first-child");
    $.unique(prev).each(function(i) {
      $(this).delay(i*600).slideUp(function() {
        $(this).appendTo(this.parentNode).slideDown();
      });
    });
  //});
}
  
window.setInterval(run,1000);