JSFiddle - React, Tailwind, and code Playground

by Sagar Bendale

HTML

<ul class='tabs'>
  <li data-tab='tab1' class='active'>Tab1</li>
  <li data-tab='tab2'>Tab2</li>
  <li data-tab='tab3'>Tab3</li>
</ul>
<section class='tab-content'>
  <div id="tab1" class='active'>Some Content Here - 1</div>
  <div id="tab2">Some Content Here - 2</div>
  <div id="tab3">Some Content Here - 3</div>
</section>

CSS

ul.tabs li {
  list-style: none;
  display: inline-block;
  padding-left: 0;
  cursor: pointer;
  margin-right: 1px;
  padding: 5px;
  border: 1px solid black;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

ul.tabs {
  padding: 0;
  margin-bottom: -1px;
}

section.tab-content > div {
  display: none;
}

section.tab-content {
  border: 1px solid black;
  padding: 5px;
}

div.active {
  display: block !important;
}

li.active {
  background: gray;
}

JavaScript

$('ul.tabs li').mouseup(function() {
  let $this = $(this);
  $('ul.tabs li').removeClass('active');
  $this.addClass('active');
  $('section.tab-content > div').removeClass('active');
  $('section.tab-content > div#' + $this.data('tab')).addClass('active');
});