JSFiddle - React, Tailwind, and code Playground

by barrycorrigan

HTML

<div class="tab-ct">
  <h2 id="next-game" class="tab-title current">Tab 1</h2>
      <h2 id="table" class="tab-title">Tab 2</h2>
      <h2 id="last-game" class="tab-title">Tab 3</h2>
      
  <ul class="tabs">
      <li class="tab-link current" data-tab="next-game">17/01/15 - 15:00</li>
      <li class="tab-link" data-tab="table">Table</li>
      <li class="tab-link" data-tab="last-game">Last Game</li>
  </ul>
  
 <div id="next-game" class="tab-content current">
       Content 1
</div>
      
      <div id="table" class="tab-content">

     Content 2
      </div>
      
      <div id="last-game" class="tab-content">

     Content 3
      </div>
      
</div>

CSS

.tab-ct {
    min-height: 375px;

    .btn {
        margin-left: 11px;
    }
}

ul.tabs{
    margin: 0 11px 24px 11px;

    list-style: none;
    border-bottom: 1px solid black;
}

ul.tabs li{
    background: none;
    color: #222;
    display: inline-block;
    cursor: pointer;
    padding: 16px 16px;
    text-align: center;
}

ul.tabs li:first-child {
    padding: 16px 16px 16px 0;
}

ul.tabs li:last-child {
    padding: 16px 0 16px 16px;
}

ul.tabs li.current{
    background: #ededed;
    color: black;
}

.tab-content{
    display: none;
}

.tab-title{
    display: none;
}

.tab-title.current{
    display: inherit;
}

.tab-content.current{
    display: inherit;
}

JavaScript

$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab'), $ct = $(this).closest('.tab-ct');

        $ct.find('ul.tabs li.current').removeClass('current');
        $ct.find('.tab-content.current').removeClass('current');
        $ct.find('.tab-title.current').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    });

});