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 class="block">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.block {
  display: block;
}


.tab span.red{color:red;}

JavaScript

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