JSFiddle - React, Tailwind, and code Playground

by Hidayat Rifan

HTML

<div id="tab-gue">
    <div class="tab-semua">
        <ul id="tab-select">
            <li class="menu-tab-1"><a href="#tab-1">Tab 1</a>

            </li>
            <li class="menu-tab-1"><a href="#tab-2">Tab 2</a>

            </li>
            <li class="menu-tab-1"><a href="#tab-3">Tab 3</a>

            </li>
            <li class="menu-tab-1"><a href="#tab-4">Tab 4</a>

            </li>
            <li class="tab5z"><a href="#tab-5">Tab 5</a>

            </li>
            <li class="menu-tab-1"><a href="#tab-6">Tab 6</a>

            </li>
        </ul>
    </div>
    <div id="isinya">
        <div class="isinya-1" id="tab-1">
            
<h4>Judul dari isi tabnya 1</h4>

            <br/>
                <br/>Nullam vitae ullamcorper arcu. Etiam felis neque, viverra id tellus et, tempus egestas justo. Etiam semper rutrum sem non tristique. Quisque laoreet at diam vitae scelerisque. Phasellus egestas interdum risus ut viverra. Vivamus et metus arcu. Etiam tincidunt ligula at nisl semper tristique. Fusce metus est, porta at suscipit eu, rutrum consequat est. Mauris consectetur molestie purus. Proin in odio id lectus blandit dapibus. Nunc faucibus faucibus nisi, ac suscipit leo feugiat at. Maecenas cursus sapien dui, id fermentum ante luctus eget. Morbi eget nisi vitae lectus vestibulum lobortis. Morbi nec dui at tellus rhoncus</div>
        <div class="isinya-2" id="tab-2">
            
<h4>Judul dari isi tabnya 2</h4>

            <br/>
                <br/>Nullam vitae ullamcorper arcu. Etiam felis neque, viverra id tellus et, tempus egestas justo. Etiam semper rutrum sem non tristique. Quisque laoreet at diam vitae scelerisque. Phasellus egestas interdum risus ut viverra. Vivamus et metus arcu. Etiam tincidunt ligula at nisl semper tristique. Fusce metus est, porta at suscipit eu, rutrum consequat est. Mauris consectetur molestie purus. Proin in odio id lectus blandit dapibus. Nunc faucibus faucibus nisi, ac suscipit leo feugiat at. Maecenas cursus...

CSS

#tab-gue {
    padding:10px 0;
}
ul#tab-select, ul#tab-select li {
    padding:0;
    margin:0;
    list-style:none;
    overflow:hidden
}
ul#tab-select li {
    display:block;
    float:left;
    margin-right:2px
}
ul#tab-select a {
    display:block;
    line-height:22px;
    padding:0 7px;
    border:1px solid rgb(36, 138, 36);
    border-bottom:0;
    border-radius:5px 5px 0 0;
    font-weight:bold;
    text-decoration:none;
}
ul#tab-select .active a {
    color:yellow;
    background-color:rgb(36, 138, 36);
    border:1px solid rgb(36, 138, 36);
    border-bottom:0
}
#isinya {
    padding:15px 10px;
    background-color:rgb(36, 138, 36);
    border-radius:0 5px 5px
}
#isinya h4 {
    font-size:160%;
    margin:0 0 15px;
    padding:0 10px;
    color:yellow
}

JavaScript

//<![CDATA[
$(function () {
    $("#tab-select li:first").addClass("active");
    $("#isinya > div").hide();
    $("#isinya > div:first").show();
    $("#tab-select a").click(function () {
        $("#tab-select li").removeClass("active");
        $(this).parent().addClass("active");
        var a = $(this).attr("href");
        $("#isinya > div:visible").hide();
        $(a).fadeToggle(1100);
        return false
    })
});
//]]>