JSFiddle - React, Tailwind, and code Playground

by Iván Pereira

HTML

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

li{
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}

li.open{
  -webkit-transform: translateX(100px);
  -moz-transform: translateX(100px);
  transform: translateX(100px);
}

JavaScript

$("li").on("click", function(){

	$("li.open").removeClass("open");

	$(this).addClass("open");

});