JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gf_top">
				<a href="javascript:void(0)" title="Toggle All Tabs"><div id="toggle_tabs" class="opac">Toggle All</div></a>
		</div>

<div id="hb_container">
        <div class="tab-link current" data-tab="tab-1"><div class="tab-link-inner">Job<br>Info</div></div>
        <div class="tab-link" data-tab="tab-2"><div class="tab-link-inner">Asb.<br>By</div></div>
        <div class="tab-link" data-tab="tab-3"><div class="tab-link-inner">Apl.<br>No.</div></div>
        <div class="tab-link" data-tab="tab-4"><div class="tab-link-inner">Struc.<br>Eng.</div></div>
    </div>

<div id="tab-1" class="tab-content current active" style="margin-top: 24px">
    <div class="tab-content-title">Job Info</div>
    <div class="single_col_container">
        <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">Content1
        </div>
    </div>
</div>

<div id="tab-2" class="tab-content" style="margin-top: 24px">
    <div class="tab-content-title">Asbestos By</div>
    <div class="single_col_container">
        <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">Content2
        </div>
    </div>
</div>

<div id="tab-3" class="tab-content" style="margin-top: 24px">
    <div class="tab-content-title">Application Number</div>
    <div class="single_col_container">
        <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">Content3
        </div>
    </div>
</div>

<div id="tab-4" class="tab-content" style="margin-top: 24px">
    <div class="tab-content-title">Structural Engineer</div>
    <div class="single_col_container">
        <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">Content4
        </div>
    </div>
</div>

CSS

#toggle_tabs {
    width:60px;
    height:60px;
    background:#b3b3ff;
    color:#000000;
}

#hb_container {
    margin: 8px 0 8px 8px;
    width: 984px;
    height: 54px;
}
    .tab-content {
        display: none;
    }

    .tab-content.current {
        display: inherit;
    }

    .tab-link {
        background: #222;
        color: #ddd;
        cursor: pointer;
        float: left;
        font-family: Roboto;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 1px;
        line-height: 14px;
        margin: 0 8px 0 0;
        width: 54px !important;
        height: 54px;
    }

        .tab-link:hover {
            background: #181818;
            color: #ffcc00;
        }

        .tab-link-inner {
            margin-top: 11px;
        }

JavaScript

$('#hb_container div.tab-link').click(function () {
    debugger;
    var tab_id = $(this).data('tab');
    $('#hb_container div').removeClass('current');
    $('.tab-content').removeClass('current').removeClass('active');
    $(this).addClass('current');
    $("#" + tab_id).addClass('current').addClass('active');
});

// The tabs are not toggling by default
var toggling = false;
$('#toggle_tabs').click(function () {
    debugger;
    if (toggling) {
        // If they are being toggled, remove the current class for all tabs except the one that is active
        $('.tab-content').each(function () {
            if (!$(this).hasClass('active')) {
                $(this).removeClass('current');
            }
        });
            
        toggling = false;
    } else {
        // If they aren't being toggled, add the current class for all tabs
        $('.tab-content').each(function () {
            $(this).addClass('current');
        });

        toggling = true;
    }
});