JSFiddle - React, Tailwind, and code Playground

by Roman

HTML

<span class="button active">1</span>
<span class="button">2</span>
<span class="button">3</span>
<span class="button">4</span>
<span class="button">5</span>

CSS

.button {
  display: inline-block;
  padding: 10px 20px;
}

.button {
  background-color: lightgrey;
}

.active {
  background-color: coral;
}

.button:hover {
  cursor: pointer;
  border: 1px solid grey;
}

JavaScript

$('.button').click(function() {
  if ($(this).hasClass('active')) return;
  $('.button').removeClass('active');
  $(this).addClass('active');
});