JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div class="tabs">
  <ul class="tabs-list">
    <li class="tab-item">1</li>
    <li class="tab-item">2</li>
    <li class="tab-item">3</li>
    <li class="tab-item">4</li>
  </ul>
  <ul class="pane">
    <li class="tab-pane">1</li>
    <li class="tab-pane">2</li>
    <li class="tab-pane">3</li>
    <li class="tab-pane">4</li>
  </ul>
</div>

CSS

.tab-pane {
  display: none;
}

.tab-pane.active,
.tab-item.active {
  display: block;
  color: #ff0;
}

.tabs-list {
  overflow: hidden;
}

.tab-item {
  float: left;
  margin-right: 20px;
}

JavaScript

$('.tabs').each(function() {
  var obj = $(this), item = $('.tab-item', obj), pane = $('.tab-pane', obj);
  pane.eq(0).add(item).addClass('active').siblings().removeClass('active');
  item.click(function() {
    var index = $(this).index();
    pane.eq(index).add(item).addClass('active').siblings().removeClass('active');
  });
});