JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://www.micae.com/JS/tabcontent.js"></script>

<div class="block tabbox">
    <div class="tabbox">
        
        <div class="tabgreybox">
            <div id="gs1" class="tabcontent">
                1
            </div>
            
            <div id="gs2" class="tabcontent">
                2
            </div>
            
            <div id="gs3" class="tabcontent">
                3
            </div>
            
            <div id="gs4" class="tabcontent">
                4
            </div>
            
            <div id="gs5" class="tabcontent">
                5
            </div>
            
            <div id="gs6" class="tabcontent">
                6
            </div>
            
            <div id="gs7" class="tabcontent">
                7
            </div>
            
            <div id="gs8" class="tabcontent">
                8
            </div>
            
            <div id="gs9" class="tabcontent">
                9
            </div>
            
            <div id="gs10" class="tabcontent">
                10
            </div>
            
        </div>
        
    </div></div>

<div id="gstabs">
    <ul id="menu">
        <li>
            <a href="#">Tab Menu 1</a>
            <ul class="reset">
                <li><a rel="gs1" class="selected" href="#">1</a></li>
                <li><a rel="gs2" href="#">2</a></li>
                <li><a rel="gs3" href="#">3</a></li>
                <li><a rel="gs4" href="#">4</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Tab Menu 2</a>
            <ul class="reset">
                <li><a rel="gs5" href="#">5</a></li>
                <li><a rel="gs6" href="#">6</a></li>
                <li><a rel="gs7" href="#">7</a></li>
                <li><a rel="gs8" href="#">8</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Tab Menu 3</a>
            <ul class="reset">
                <li><a...

CSS

.tabbox #gstabs a { font-size:9pt; }
/*tabbox*/
.tabbox { width: 605px; font-size:9pt; text-align:left; }
.tabgreybox { background-color: #f0f0f0; border: 6px solid #f0f0f0; }
.tabcontent { background-color: #fff; border: 1px solid #dfdfdf; line-height:16px; padding:10px; }
@media print { .tabcontent { display:block !important; } }
.tabcontent{ display:none; font-size:9pt; line-height:16px; }
.tabcontent table { line-height:16px; }
.tabcontent h1 { font-size:12pt; }

.tabcontent .pad { padding: 8px; }
.tabbox #gstabs li {  }
.tabbox #gstabs, .tabbox #gstabs a { height: 25px; }
.tabbox #gstabs a { padding:3px 10px; line-height: 20px; color: #555555; }
.tabbox #gstabs a.selected { background-color: #f0f0f0; }

ul#menu, ul#menu ul { list-style-type:none; margin: 0; padding: 0; width: 15em; font-size:8pt; }
ul#menu a { display: block; text-decoration: none; }
ul#menu li { margin-bottom:1px; }
ul#menu li a { background: #dfdfdf; color: #000; padding: 0.5em; border:1px #aaa solid; }
ul#menu li a:hover { background: #aaa; }
ul#menu li ul  { padding-top:3px; padding-bottom:3px; background:#f0f0f0; }
ul#menu li ul li { margin-bottom:0; border-top:3px solid #f0f0f0; border-bottom:3px solid #f0f0f0; border-left:6px solid #f0f0f0; border-right:6px solid #f0f0f0; }
ul#menu li ul li a { background: #fff; color: #000;padding-left: 20px; border:1px solid #dfdfdf; }
ul#menu li ul li a.selected { background:#f0f0f0; }
ul#menu li ul li a:hover { background: #aaa; padding-left: 20px;}

.open_menu { background:#cfc !important; }

JavaScript

function initMenu() {
    $('#menu ul').hide();
    $('#menu li a').click(function() {
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            return false;
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal').siblings('a').removeClass('open_menu');
            checkElement.slideDown('normal').siblings('a').addClass('open_menu');
            return false;
        }
    });

    $("ul.reset a").click(function() {
        $(this).closest("ul").siblings("a").addClass("open_menu");
    });
}

function showCurrentTab() {
    var curId = $('.tabcontent:visible')[0].id,
        $curLink = $('a[rel="' + curId + '"]');

    $curLink.closest('ul').parent('li').children('a').click();
}

$(document).ready(function() {
    initMenu();
   //showCurrentTab();
});