JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
    // <![CDATA[
    function tab(tab) {
        document.getElementById('tab1').style.display = 'none';
        document.getElementById('tab2').style.display = 'none';
        document.getElementById('tab3').style.display = 'none';
        document.getElementById('tab4').style.display = 'none';
        document.getElementById('tab5').style.display = 'none';
        document.getElementById('tab6').style.display = 'none';
        document.getElementById('li_tab1').setAttribute("class", "");
        document.getElementById('li_tab2').setAttribute("class", "");
        document.getElementById('li_tab3').setAttribute("class", "");
        document.getElementById('li_tab4').setAttribute("class", "");
        document.getElementById('li_tab5').setAttribute("class", "");
        document.getElementById('li_tab6').setAttribute("class", "");
        document.getElementById(tab).style.display = 'block';
        document.getElementById('li_' + tab).setAttribute("class", "active");
    }
    // ]]>
</script>
<div id="tabs">
    <ul>
        <li id="li_tab1" onclick="tab('tab1')"><a>School Sites</a>

        </li>
        <li id="li_tab2" onclick="tab('tab2')"><a>21st</a>

        </li>
        <li id="li_tab3" onclick="tab('tab3')"><a>Project Leadership</a>

        </li>
        <li id="li_tab4" onclick="tab('tab4')"><a>Site</a>

        </li>
        <li id="li_tab5" onclick="tab('tab5')"><a>Collaborative</a>

        </li>
        <li id="li_tab6" onclick="tab('tab6')"><a>Staff</a>

        </li>
    </ul>
    <div id="Content_Area">
        <!------------------------------------------------------- Tab 1 School Sites ------------------------------------------------------->
        <div id="tab1">School site info</div>
        <!------------------------------------------------------- Tab 2 - 21st ------------------------------------------------------->
        <div id="tab2" style="display: none;">21st</div>
       ...

CSS

#tabs ul {
    padding: 0px;
    margin: 0px;
    margin-left: 10px;
    list-style-type: none;
}
#tabs ul li {
    display: inline-block;
    clear: none;
    float: left;
    height: 24x;
}
#tabs ul li a {
    position: relative;
    margin-top: 0px;
    display: block;
    margin-left: 1px;
    margin-bottom: 1px;
    line-height: 50px;
    padding-left: 0px;
    background: #007c8c;
    z-index: 9999;
    border: none;
    border-bottom: 0px;
    /*-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;*/
    width: 140px;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
}
#tabs ul li a:hover {
    top: -5px;
    background: #ebd000;
    !important;
}
#tabs #Content_Area {
    padding: 0 10px;
    clear:both;
    overflow:hidden;
    line-height:19px;
    position: relative;
    top: 20px;
    z-index: 5;
    height: relative;
    overflow: hidden;
    padding-bottom: 20px;
}
p {
    padding-left: 15px;
}
#stabs ul {
    padding: 0px;
    margin: 0px;
    margin-left: 10px;
    list-style-type: none;
}