JSFiddle - React, Tailwind, and code Playground

by evild70

HTML

<div id="tabsContainer">
    <ul id="toolTabs">
        <li><a href="#" title="healthReform" class="tab">Health Reform</a></li>
        <li><a href="#" title="marketing" class="tab">Marketing UnitedHealthCare</a></li>
        <li><a href="#" title="education" class="tab">Education &amp; Training</a></li>
    </ul>
</div>
<div id="healthReform" class="content">Heath Reform</div>
<div id="marketing" class="content">Marketing UnitedHealthcare</div>
<div id="education" class="content">Education &amp; Training</div>

CSS

#toolTabs li { display:inline; list-style:none; }

#healthReform { display:block; }
#marketing { display:none; }
#education { display:none; }

JavaScript

$(document).ready(function() {

    $('a.tab').click(function() {
        // hide all content
        $('.content').css('display', 'none');
        // get title of tab clicked
        var clicked = $(this).attr('title');
        // display content
        $('#'+clicked).css('display', 'block');
    });
    
});