JSFiddle - React, Tailwind, and code Playground

by ilyasnone

HTML

<div class="p-tab-container">
<div class="p-tab-c cf">
    <div class="ptab active" data-panel="p1">Tab 1</div>
    <div class="ptab" data-panel="p2">Tab 2</div>
</div>
    <div class="p-tab-p">
    <div class="ppanel " id="p1">Tab 1 content</div>
    <div class="ppanel active" id="p2">Tab 2 content</div>
    </div>
</div>

CSS

.cf{overflow: auto;}
.p-tab-container{}
.ptab{float:left;border:1px solid #ddd;padding:10px 20px;}
.ppanel{display:none;}
.active{display:block;}
.ppanel{border:1px solid #ddd;padding:10px;}
.p-tab-c{display:block;}
.p-tab-p{margin:-1px 0 0;}
.ptab.active{color:red;border-bottom:1px solid #fff;}

JavaScript

$('.ptab').click(function(){
    $('.ppanel,.ptab').removeClass('active');
    $(this).addClass('active');
    $("#"+$(this).data('panel')).addClass("active");
});