JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<ul id="tabs">
    <li class="tab-item" data-item="item-1">Item 1</li>
    <li class="tab-item" data-item="item-2">Item 2</li>
    <li class="tab-item" data-item="item-3">Item 3</li>
</ul>

<ul id="tabs-content">
    <li class="tab-content-item active" data-content="item-1">Conteúdo 1</li>
    <li class="tab-content-item" data-content="item-2">Conteúdo 2</li>
    <li class="tab-content-item" data-content="item-3">Conteúdo 3</li>
</ul>

CSS

.tab-content-item {
    display: none
}

.tab-content-item.active {
    display: block
}

JavaScript

$('#tabs').on('click', '.tab-item', function() {
    var current = $(this).attr('data-item');

    $('.tab-content-item.active').fadeOut('fast').removeClass('active');
    $('.tab-content-item[data-content=' + current + ']').fadeIn('slow').addClass('active');
});