JSFiddle - React, Tailwind, and code Playground

by path411

HTML

<ul class="tablist">
    <li class="tablist-tab">
        <div class="tablist-title">t1</div>
        <div class="tablist-content">c1</div>    
    </li>
    <li class="tablist-tab">
        <div class="tablist-title">t2</div>
        <div class="tablist-content">c2</div>    
    </li>
</ul>
asdf

CSS

.tablist {
    position:relative;
    padding:0;
    margin:0 20px;
    clear:both;
    overflow:hidden;
}
.tablist li {
    list-style-type:none;
    float:left;
}
.tablist .tablist-title {
    padding:3px 5px;
    border:1px solid blue;
    cursor:pointer;
}
.tablist .tablist-content {
    display:none;
    position:absolute;
    left:0;
    min-width:100%;
    min-height:3em;
    padding:1em;
    background-color:red;
}

JavaScript

$(function() {
    $('.tablist-tab').on({
        'click': function(e) {
            $(this).parent().find('.tablist-content').hide();
            $(this).find('.tablist-content').show();
        }
    });
});