JSFiddle - React, Tailwind, and code Playground

by surakrai

HTML

<section class="tabs-warp">
    <ul class="tab-label">
        <li class="current">One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
    <div class="tab-content">
        <div class="active">
            <h3>Tab 1 heading</h3>
            <p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>
            <p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>
        </div>
        <div>
            <h3>Tab 2 heading</h3>
            <p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>
            <p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>            
        </div>
        <div>
            <h3>Tab 3 heading</h3>
            <p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>
        </div>
        <div>
            <h3>Tab 4...

CSS

.tabs-warp{
    width: 500px;
    color: #999;
}
ul.tab-label{
    padding: 0px;
    margin: 0px;
    background: #a0c959;
}
ul.tab-label::after{
    content: "";
    display: table;
    clear: both;
}
ul.tab-label li{
    list-style: none;
    float: left;
    color: #fff;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.3s; 
}
ul.tab-label li.current{
    position: relative;
    background: #83b037;
}
ul.tab-label li::after{
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    content: '';
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 6px solid #83b037;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s; 
}
ul.tab-label li.current::after{
    opacity: 1;
}
.tab-content{
    position: relative;
}
.tab-content > div{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    padding: 0 10px;    
    opacity: 0;
    visibility: hidden;
    border: solid 1px #a0c959;
    border-top: none;
    background: #f2f2f2;
    transition: all 0.5s;   
    transform-origin: 50% calc(0% + 10px);
    transform: perspective(1000px) rotate3d(1,0,0,-100deg);
}
.tab-content > div.active{
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: perspective(1000px) rotate3d(1,0,0,0deg) ;
}
.tab-content > div h3{
    color: #333;
}

JavaScript

$('.tab-label li').click(function() {
    $(this).addClass('current').siblings().removeClass('current');
    $('.tab-content > div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});