JSFiddle - React, Tailwind, and code Playground

by chovy

HTML

<div class="tabs">
    <nav>
        <ol>
            <li><a href="#one">one</a></li>
            <li><a href="#two">two</a></li>
            <li><a href="#three">three</a></li>
        </ol>
    </nav>
    <div class="items">   
        <section class="content" id="one">Content one</section>
        <section class="content hide" id="two">Content two</section>
        <section class="content hide" id="three">Content three</section>
    </div>
</div>

CSS

.tabs { margin-left: 100px; }
.tabs * { margin: 0; padding: 0; }
.tabs nav li { display: inline-block; background: white; }
.tabs nav li { border: 1px solid black; border-bottom: none; }
.tabs a { text-decoration: none; }
.tabs nav li.active a { bottom: -1px; }
.tabs .content { border: 1px solid black; }

.hide { display: none; }

JavaScript

$('.tabs nav a').on('click', function(e){
    e.preventDefault();
    console.log(e);
    var $el = $(e.target);
    $el.parent().addClass("active");
    var clickedId = $el.attr('href');
    var $content = $(clickedId);
    $content.removeClass('hide');
    $content.siblings().addClass('hide');
});