JSFiddle - React, Tailwind, and code Playground

by Afzaal Ahmad Zeeshan

HTML

<div>
    <h4 class="first" style="font-weight: 700;">Header for First</h4>
    <h4 class="second">Header for Second</h4>
    <br /><br /><br /><br />
    <div id="first">
        <p>This is the paragraph for the first tab.</p>
    </div>
    <div id="second">
        <p>This is the paragraph for the second tab.</p>
    </div>
</div>

CSS

.first, .second {
    padding: 10px; 
    display: inline-block;
    font-weight: 100;
}

.first {
    float: left;
}

.second {
    float: right;
}

h4 {
    border: 1px solid #333;
    background-color: #cecece;
    cursor: pointer;
    font-family: 'Segoe UI';
}

JavaScript

$('h4').click(function () {
    // handle the click on the H4
    if($(this).attr('class') == 'first') {
        $('#first').show();
        $('#second').hide();
        
        // change the style
        // reset
        $('h4').css('font-weight', '100');
        // apply new
        $(this).css('font-weight', '700');
    } else {
        $('#first').hide();
        $('#second').show();
        
        // change the style
        // reset
        $('h4').css('font-weight', '100');
        // apply new
        $(this).css('font-weight', '700');
    }
});