JSFiddle - React, Tailwind, and code Playground

by ramesh valasa

HTML

<ul class="list-container"> 
  <li class="list-item"> list item 1  </li>
  <li class="list-item"> list item 2  </li>
  <li class="list-item"> list item 3  </li>
  <li class="list-item"> list item 4  </li>
  <li class="list-item"> list item 5  </li>
  <li class="list-item"> list item 6  </li>
</ul>

CSS

.list-item   {
  padding-block: 10px;
  cursor: pointer;
  padding-inline: 10px
}

JavaScript

$('.list-item').click(function() {
$('.list-item').removeClass('selected');
$(this).addClass('selected');

})