JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tab-container">
        <ul class="tab-menu">
            <li id="tab1" class="active">Tab 1</li>
            <li id="tab2">Tab 2</li>
            <li id="tab3">Tab 3</li>
        </ul>
        <div class="clear"></div>
        <div class="tab-top-border"></div>
        <div id="tab1-tab" class="tab-content active">
        <p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</p>
        </div>
        <div id="tab2-tab" class="tab-content">
        <p>Tab 2 content.</p>
        </div>
        <div id="tab3-tab" class="tab-content">
        <p>Tab 3 content</p>
        </div>
        </div>

CSS

body{
            background: #fff;
            margin:0;
            }
            .clear{
            clear: both;
            height: 0;
            visibility: hidden;
            display: block;
            }
            a {
            text-decoration: none;
            }
            #tab-container{
            font-family: Arial,  Verdana, Helvetica, sans-serif;
            font-size: 14px;
            line-height:16px;
            margin: 1em auto;
            width: 700px;
            border:0px solid #ccc;
            height:28px;
            background:#e1eff8;
            padding-left: 0px;
            padding-top:10px;
            padding-bottom:13px;
            -moz-box-shadow: inset 0 -15px 2px #dadada;
            -webkit-box-shadow:inset  0 -20px 2px #dadada;
            box-shadow: inset 0-5px 10px #dadada;
            border-top-left-radius:10px;
            border-top-right-radius:10px;
            }
            #tab-container ul{
            list-style: none;
            width: 100%;
            }
            #tab-container ul.tab-menu li{
            display: block;
            float: left;
            position: relative;
            font-weight: 700;
            padding: 10px 20px 10px 20px;
            background: #eee;
            border: 1px solid #ddc;
            border-bottom: none;
            border-width: 1px;
            color: #999;
            cursor: default;
            height: 14px;
            margin-bottom: -1px;
            margin-right: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            }
            #tab-container ul.tab-menu li.active{
            background: #fff;
            color: #0088CC;
            height: 15px;
            border-bottom: 0;
            background: -moz-linear-gradient(top, #ebebeb, white 10%);
            background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white));
            }
            .tab-top-border {
           ...

JavaScript

$(document).ready(function(){
    var activeTabIndex = -1;
    var tabNames = ["tab1","tab2","tab3"];

    $(".tab-menu > li").click(function(e){
        for(var i=0;i<tabNames.length;i++) {
            if(e.target.id == tabNames[i]) {
                activeTabIndex = i;
            } else {
                $("#"+tabNames[i]).removeClass("active");
                $("#"+tabNames[i]+"-tab").css("display", "none");
            }
        }
        $("#"+tabNames[activeTabIndex]+"-tab").fadeIn();
        $("#"+tabNames[activeTabIndex]).addClass("active");
        return false;
    });
});