JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="is-tabs">
    <a class="is-tabs-nav" href="#first-tab" data-name="tab">
        First Tab
    </a>
    <a class="is-tabs-nav" href="#second-tab" data-name="tab">
        My Second Tab
    </a>
    <a class="is-tabs-nav" href="#third-tab" data-name="tab">
        Third Tab
    </a>
</div>

<div class="is-tabs-content">
    <div data-tab="first-tab" data-name="tab" class="is-tabs-tab">
        In a bedroom, a woman named Victoria Skillane (Lenora Crichlow)         wakes up in a chair to find she can't recall anything about her         life. Apparently the result of a failed suicide attempt,                 Victoria is surrounded by images of a small girl (Imani Jackman)         — whom she assumes to be her daughter — as well as photos of her         and an unknown man (Nick Ofield).
    </div>
    <div data-tab="second-tab" data-name="tab" class="is-tabs-tab">
        In a bedroom, a woman named Victoria Skillane (Lenora Crichlow)         wakes up in a chair to find she can't recall anything about her         life. Apparently the result of a failed suicide attempt,                 Victoria is surrounded by images of a small girl (Imani Jackman)         — whom she assumes to be her daughter — as well as photos of her         and an unknown man (Nick Ofield). 
        In a bedroom, a woman named Victoria Skillane (Lenora Crichlow)         wakes up in a chair to find she can't recall anything about her         life. Apparently the result of a failed suicide attempt,                 Victoria is surrounded by images of a small girl (Imani Jackman)         — whom she assumes to be her daughter — as well as photos of her         and an unknown man (Nick Ofield).
        In a bedroom, a woman named Victoria Skillane (Lenora Crichlow)         wakes up in a chair to find she can't recall anything about her         life. Apparently the result of a failed suicide attempt,                 Victoria is surrounded by images of a small girl (Imani Jackman)         —...

SCSS

.is-tabs {
    overflow: hidden;
    background: #eee;
    a {
        display: block;
        float: left;
        padding: 10px 10px;
        border-left: 1px solid #999;
        color: #000;
        &:first-child {
            border:0 ;
        }
        &:hover {
            background: #ccc;
        }
        &.active {
            background: #999;
            color: #fff;
        }
    }
}

.is-tabs-content {
    position: relative;
    .is-tabs-tab {
        display: none;
        &.active {
            display: block;
        }
    }
}

JavaScript

var isTabsClass = '.is-tabs-nav';
var $isTabs = $(isTabsClass);
$isTabs.on('click',function(e){
    e.preventDefault();
    var $this = $(this);
    if ($this.hasClass('active')) { return false; }
    var thisName = $this.attr('data-name');
    var thisHref = $this.attr('href').replace('#','');
    var thisContent = $('[data-tab="'+thisHref+'"]');
    if (thisContent.length) {
        
    } else {
        return false;
    }
    if (thisName) {
        $(isTabsClass+'[data-name="'+thisName+'"]').removeClass('active');
    } else {
        $isTabs.removeClass('active');
    }
    
    
    $this.addClass('active');
});