JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<div class="tabs">
    <ul>
        <li><a href="#tab1">tab 1</a></li>
        <li><a href="#tab2">tab 2</a></li>
    </ul>
</div>

<div class="tab-cotainer">
    <div id="tab1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius sollicitudin justo. Donec congue congue aliquam. Mauris sit amet cursus orci. Fusce sit amet felis feugiat, tempus tortor ut, vestibulum sapien. Nulla vestibulum dapibus augue, eu viverra magna condimentum eget. Nullam at turpis lacinia, accumsan nisl in, gravida leo. 
    </div>
    <div id="tab2">
        Cras vel aliquet leo. Quisque blandit ultricies nisl, quis scelerisque sem gravida at. Proin pulvinar dolor at iaculis scelerisque. Cras commodo lorem metus, ac ultrices metus elementum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas at feugiat massa. 
    </div>
</div>

CSS

.tab-cotainer {
    border: solid 1px black;
}

.tab-cotainer > * {
    display : none;
}

.tab-cotainer > *:first-child {
  display:block;   
} 

.tabs {
    overflow:hidden;
}

.tabs ul {
    list-style: none;
    padding: 0;
}

.tabs ul li {
    float: left;
    border: solid 1px black;
}

.tabs a {
    text-decoration: none;
    color: #555;
    padding: 4px;
}

.active {
    background: yellow;
}

JavaScript

$(function () {
    var t = $('.tabs'),
        cont = $('.tab-cotainer');
        
    
    t.find('li:first').addClass('active');
    
    t.find('a').click(function (e) {
           e.preventDefault();
        var self = $(this),
            id = self.attr('href'),
            active = t.find('.active a'),
            active_id = active.attr('href');
        
        cont.find(active_id).fadeOut(function () {
            active.parent().removeClass('active');
            self.parent().addClass('active');
            cont.find(id).fadeIn();
        });
    });
});