JSFiddle - React, Tailwind, and code Playground

by gmcalab

HTML

<div class="tabs">
<div id="navigation">
    <div data-id="tab1">Tab 1</div>
    <div data-id="tab2">Tab 2</div>
    <div data-id="tab3" class='active'>Tab 3</div>
    <div data-id="tab4">Tab 4</div>
    <div data-id="tab5">Tab 5</div>
</div>
    <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;
}

#navigation {
    position: relative;
    top: 1px;
  
    margin: 0;
    padding: 0;
    display: table;
    table-layout:fixed;
    
    width: 100%;
    
    
}
#navigation > div {
  
     -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;
    
    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
    
    
    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 !important;
    background-color: white !important;
}

.content{
  display: none;   
}

JavaScript

$(function () {
    
    var active = $('.active').data('id');
    $('#' + active).show();
   
    $('#navigation > div').on('click', function () {
 
        $('#navigation > div').removeClass('active');
        $(this).addClass('active');
        var id = $(this).data('id');
        $('.content').hide();
        $('#' + id).show();
        
        
    });
});