JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<ul>
    <li><a class="tab-toggle" href="#tab1">Tab 1</li>
    <li><a class="tab-toggle" href="#tab2">Tab 2</li>
    <li><a class="tab-toggle" href="#tab3">Tab 3</li>
</ul>

<div class="tabs">
    <div class="tab-pane" id="tab1">
        hello there 111111
    </div>

    <div class="tab-pane" id="tab2">
        whats up 222222
    </div>

    <div class="tab-pane" id="tab3">
        suppp 3333
    </div>
</div>

CSS

/* Hide the tab */
.tab-pane {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Show the tab when active */
.tab-pane.active {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

JavaScript

// Listen for click events
document.addEventListener('click', function (event) {

    // Only take action if the clicked link was a tab toggle with a valid anchor link
    if ( !event.target.classList.contains( 'tab-toggle' ) || !event.target.hash ) return;

    // Get the anchored content
    var content = document.querySelector( event.target.hash )
    if ( !content ) return;

    // Store the ID as a data attribute and remove it
    content.setAttribute( 'data-id', content.id );
    content.id = '';

}, false);
// Listen for hashchange events
window.addEventListener('hashchange', function (event) {

    // Get the anchored content
    var content = document.querySelector( '[data-id="' + window.location.hash.substring(1) + '"]' );
    if ( !content ) return;

    // Restore the ID
    content.id = content.getAttribute( 'data-id' );

    // Open the content
    content.classList.add( 'active' );


    // Try to bring the content into focus
    content.focus();

}, false);
// Get the content
var content = document.querySelector( window.location.hash );

// If the content is a tab, open it
if ( content && content.classList.contains( 'tab-pane' ) ) {
    content.classList.add( 'active' );
    // close other tabs or do whatever else here
}