JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<ul>
  <li>
    <h2>Sufyan</h2>
    <p>Wordpress Developer</p>
  </li>
  <li>
    <h2>Hussain</h2>
    <p>Logo Designer</p>
  </li>
  <li>
    <h2>Haseeb</h2>
    <p>FrontEnd Dev.</p>
  </li>
  <li>
    <h2>Haris</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Kashif</h2>
    <p>PHP.</p>
  </li>
</ul>

CSS

li.active {
  background-color : #339966;
}

li {
    float: left;
    text-align: center;
    width: 20%;
}

JavaScript

jQuery(document).ready(function(){
      $("ul li").click(function() {
        $("li.active").removeClass("active"); //Remove any "active" class
        var $active = $(this).detach().addClass("active"),
            $lis = $("ul li");
        $active.insertBefore($lis.eq(Math.floor($lis.length / 2)));
      });
    });