JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<ul id="tabs">

      <li><a id="tab1"> </a></li>
      <li><a id="tab2"> </a></li>
      <li><a id="tab3"> </a></li>
      <li><a id="tab4"> </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 {

  margin:0; padding:0;
   

}
a {cursor:pointer;}

#tabs li {
     margin:8px 0
}

#tabs li a {
 background:#0041f0;
     
height: 8px;
width: 8px;
display:block;
border-radius: 50%;

  
}

#tabs li a.inactive{
     background: rgb(128, 160, 247);

}

#tabs li a:hover, #tabs li a.inactive:hover {

   background:#0041f0;
}

.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;

}

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');
 }
});

});