JSFiddle - React, Tailwind, and code Playground

by gmcalab

HTML

<div class="tabs">
<ul id="navigation">
    <li data-id="tab1">Tab 1</li>
    <li data-id="tab2">Tab 2</li>
    <li data-id="tab3" class='active'>Tab 3</li>
    <li data-id="tab4">Tab 4</li>
    <li data-id="tab5">Tab 5</li>
</ul>
    <div class="clearfix"></div>
</div>

<div class='content' id="tab1">hello1</div>
<div class='content' id="tab2">hello2</div>
<div class='content' id="tab3">hello3</div>
<div class='content' id="tab4">hello4</div>
<div class='content' id="tab5">hello5</div>

CSS

.tabs {
    padding:0 20px;
    border-bottom: 1px solid red;
}

ul {
    position: relative;
    top: 1px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: table;
    table-layout:fixed;
    width: 100%;
    
    
}
li {
  
     -moz-border-radius: 5px 0 5px 0;
    -webkit-border-radius: 5px 5px;
    -khtml-border-radius: 20px 0 0 0;
    border-radius: 10px  10px 0 0;
    
    display: table-cell;
    border-right: 1px solid red;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    text-align: center;
    background-color: salmon;
    padding: 5px;
    cursor: pointer;
}


li:first-child {
    border-left: 1px solid red;
}

.active {
    border-bottom: 0;
    background-color: white;
}

.content{
  display: none;   
}

JavaScript

$(function () {
    
    var active = $('.active').data('id');
    $('#' + active).show();
    
    $('li').on('click', function () {

        $('ul li').removeClass('active');
        $(this).addClass('active');
        var id = $(this).data('id');
        $('.content').hide();
        $('#' + id).show();
        
        
    });
});