JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="tabs">
  <div class="tab-button-outer">
    <ul id="tab-button">
              <li ><a href="#tab00">One </a></li> 
      <li ><a href="#tab01">two </a></li>
     <li ><a href="#tab02"> </a></li> 
     <li ><a href="#tab03"> </a></li> 

    </ul>
  </div>
  

  <div id="tab00" class="tab-contents">
    <h2>Zumigo Location</h2>
   
  </div>
  <div id="tab01" class="tab-contents">
    <h2>MoRTH - RC</h2>
   
  </div>
  <div id="tab02" class="tab-contents">
    <h2>MoRTH - DL</h2>
    
  </div>
  <div id="tab03" class="tab-contents">
    <h2>Digilocker</h2>
  </div>

</div>

CSS

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
.tabs {

  margin: 0 auto;
  padding: 0 20px;
}
#tab-button {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#tab-button li {
  display: table-cell;
  width: 20%;
}
#tab-button li a {
  display: block;
  padding: .5em;
  background: #eee;
  border: 1px solid #ddd;
  text-align: center;
  color: #000;
  text-decoration: none;
}
#tab-button li:not(:first-child) a {
  border-left: none;
}
#tab-button li a:hover,
#tab-button .is-active a {
  border-bottom-color: transparent;
  background: #fff;
}
.tab-contents {
  padding: .5em 2em 1em;
  border: 1px solid #ddd;
}



.tab-button-outer {
  display: none;
}
.tab-contents {
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .tab-button-outer {
    position: relative;
    z-index: 2;
    display: block;
  }
  .tab-select-outer {
    display: none;
  }
  .tab-contents {
    position: relative;
    top: -1px;
    margin-top: 0;
  }
}

JavaScript

var $tabButtonItem = $('#tab-button li'),
      $tabSelect = $('#tab-select'),
      $tabContents = $('.tab-contents'),
      activeClass = 'is-active';
                 
                $tabButtonItem.first().addClass(activeClass);
     $tabContents.not(':first').hide();


  

                  

  

  $tabButtonItem.find('a').on('click', function(e) {
    var target = $(this).attr('href');

    $tabButtonItem.removeClass(activeClass);
    $(this).parent().addClass(activeClass);
    $tabSelect.val(target);
    $tabContents.hide();
    $(target).show();
    e.preventDefault();
  });

  $tabSelect.on('change', function() {
    var target = $(this).val(),
        targetSelectNum = $(this).prop('selectedIndex');

    $tabButtonItem.removeClass(activeClass);
    $tabButtonItem.eq(targetSelectNum).addClass(activeClass);
    $tabContents.hide();
    $(target).show();
  });