JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<div id="tabs" class="pulsetab-set">

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

</div>
          <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;
   padding-right: 2px;
   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;
      outline:none;
}

#tabs li a {

    font-family:Arial, Helvetica, sans-serif; 
    font-size: small;
    font-weight: bold; 
    color: #5685bc;;
   padding-top: 5px;
   padding-left: 7px;
   padding-right: 7px;
    padding-bottom: 8px; 
    display:block; 
    background: #FFF;
    border-top-left-radius:3px; 
    border-top-right-radius:3px; 
    text-decoration:none;
    outline:none;
  
}

#tabs li a.inactive{
    padding-top:5px;
    padding-bottom:8px;
  padding-left: 8px;
  padding-right: 8px;
    color:#666666;
    background: #EEE;
   outline:none;
   border-bottom: solid 1px #CCC;

}

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


    color: #5685bc;
      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;

}

.container h2 { margin-left: 15px;  margin-right: 15px;  margin-bottom: 10px; color: #5685bc; }

.container p { margin-left: 15px; margin-right: 15px;  margin-top: 10px; margin-bottom: 10px; line-height: 1.3; font-size: small; }

.container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }

.container li { padding-bottom: 5px; margin-left: 5px;}

JavaScript

$(document).ready(function() {   


$(".pulsetab-set a").click(function (){
$(this).toggleClass("active");
$(this).siblings().removeClass("active");
  
});




$('.pulsetab-set a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
    
$('.pulsetab-set a').click(function(){
    var t = $(this).attr('id');
  if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('.pulsetab-set a').addClass('inactive');           
    $(this).removeClass('inactive');
    
    $('.container').hide();
    $('#'+ t + 'C').fadeIn('slow');
 }
});

});