JSFiddle - React, Tailwind, and code Playground

by gangadharjannu

HTML

<ul id="tabs">

  <li class="active"><a id="tab1">test1</a></li>
  <li><a id="tab2">test2</a></li>
  <li><a id="tab3">test3</a></li>
  <li><a id="tab4">test4</a></li>

</ul>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>

CSS

#tabs {
  width: 100%;
  height: 30px;
  border-bottom: solid 1px #CCC;
  margin-top: 30px;
}

a {
  cursor: pointer;
}

#tabs li {
  float: left;
  list-style: none;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin-right: 5px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  padding:5px;
  outline: none;
}

#tabs li a {
  display: block;
  background: #FFF;
  text-decoration: none;
  outline: none;
}

#tabs li.inactive {
  background: #EEE;
  outline: none;
  border-bottom: solid 1px #CCC;
}
#tabs li.active {
  background: #EEE;
  outline: none;
  border-bottom: solid 1px #EEE;
}
#tabs li a:hover,
#tabs li a.inactive:hover {
  outline: none;
}

.container {
  clear: both;
  width: 100%;
  border-left: solid 1px #CCC;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
  text-align: left;
  padding-top: 20px;
  background:#EEE;
}

JavaScript

$(document).ready(function() {

  $('#tabs li a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.container:first').show();

  $('#tabs li a').click(function() {
    var t = $(this).attr('id');
    if ($(this).hasClass('inactive')) { //this is the start of our condition 
      $('#tabs li a').addClass('inactive');
      $(this).removeClass('inactive');

      $('.container').hide();
      $('#' + t + 'C').fadeIn('slow');
    }
  });

});