JSFiddle - React, Tailwind, and code Playground

by Michael Keller

HTML

<ul id="tabs">
    <li data-which="tab-1">Tab 1</li><li data-which="tab-2">Tab 2</li>
</ul>

<ul id="content-groups">
    <li data-which="tab-1">Tab 1 is the coolest tab around.</li>
    <li data-which="tab-2">No way! Tab 2 is the best.</li>
</ul>

CSS

body{
    font-family: Helvetica, sans-serif;
}
ul{
    margin: 0;
    padding: 0;
    font-size: 13px;
}
#content-groups{
    margin-top: 15px;
}
#content-groups li{
    display: none;
}

li{
    list-style: none;
}
#tabs li{
    display: inline-block;
    padding: 5px 8px;
    border-bottom: 1px solid #ccc;
}
#tabs li.active{
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid transparent;
}
#tabs li:not(.active):hover{
    cursor: pointer;
    text-decoration: underline;
}

JavaScript

// On click...
$('#tabs li').on('click', function(){
  // Eyedrop the data attribute of the tab we just clicked on
  var which = $(this).attr('data-which');
    
  // Remove the class `active` from any tabs that might have it
  $('#tabs li.active').removeClass('active');
  // Add the `active` class to what we just clicked on
  $(this).addClass('active')
  
  // Hide all content group items
  $('#content-groups li').hide();
  // Show the content group item that has the eyedropped value as its `data-which` value.
  $('#content-groups li[data-which="'+which+'"]').show();
});

// Set the initial state
$('li[data-which="tab-1"]').trigger('click');