JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="tab">
    <span class="red">tab1</span>
    <span>tab2</span>
    <span>tab3</span>
    <span>tab4</span>
</div>

<div class="cont-tabs">
    <div>contenido 1</div>
    <div>contenido 2 </div>
    <div>contenido 3</div>
    <div>contenido 4</div>
</div>

CSS

.cont-tabs > div{
    display:none;
}
.cont-tabs > div:nth-child(1){
    display:block;
}

.tab span.red{color:red;}

JavaScript

$(function(){
  $('.tab span').click(function(){
   var index = $(this).index();
   $('.tab span').removeClass('red');
   $('.cont-tabs > div').hide();
    $(this).addClass('red');
   $('.cont-tabs > div').eq(index).fadeIn();
  });
 });