JSFiddle - React, Tailwind, and code Playground

by ethanpil

HTML

<div class="vtabber">
    
    <div class="tabs">
        <div class="tab active" data-target="tab-1">One</div>
        <div class="tab" data-target="tab-2">Two</div>
        <div class="tab" data-target="tab-3">Three</div>
    </div>
    
     <div class="tab-contents">
        <div id="tab-1" class="tab-content active">1</div>
        <div id="tab-2" class="tab-content">2</div>
        <div id="tab-3" class="tab-content">3</div>
    </div>    
</div>

CSS

.vtabber {

}

.tabs {
    width: 33%;
    float:left;
}
.tab {
    cursor:pointer;
    background: #eee; 
    padding: 10px; 
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.tab:first-of-type {
    border-top: 1px solid #ccc;
}
.tab.active {
    background:white;
}
.tab-contents {
    width: 66%;
    float:left;
}
.tab-content {
    display: none;
    border: 1px solid #ccc;
    width: 100%;
    padding: 1em;
    box-sizing: border-box;
}
.tab-content.active {
    display: block;
}

JavaScript

$('.tab').click(function(){
    var target=$(this).data('target'); 
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('#'+target).addClass('active');
    
    $('.tab-contents .active').css('height',$('.tabs').height()+'px');
});
$('.tab-contents .active').css('height',$('.tabs').height()+'px');