JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<ul>
  <li>item 1</li>
  <li class="active">item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

SCSS

body {
  width: 100%;
  height: 7500px;
  background: linear-gradient(to bottom, #ffcb77 0%, #deaaff 100%);
}

ul {
  overflow: hidden;
}

ul li {
  float: left;
  margin-right: 20px;
  font-size: 18px;
  &:not(.active) {
    border: 1px solid transparent;
  }
}

ul li.active {
  font-weight: bold;
}

JavaScript

$('li').on("click", function(event, salutation, name) {
  $('li').removeClass("active");
  $(this).addClass("active");
});