JSFiddle - React, Tailwind, and code Playground

by Rohit Azad

HTML

<h1> Simple tabing Code </h1>
<div class="tabing-content">
  <ul>
    <li><a href="#home" class="active">Home</a></li>
    <li><a href="#about_us">About Us</a></li>
    <li><a href="#service">Service</a></li>
    <li><a href="#contact_us">Contact Us</a></li>
  </ul>
</div>
<div id="home" class="tab active">
  <h3>Welcome to tabing code!</h3>
  <p>Some code here</p>
</div>
<div id="about_us" class="tab">
  <h3>About Us</h3>
  <p>Page Under Construction<p>
</div>
<div id="service" class="tab">
  <h3>Service Section</h3>
  <p>Page Under Construction</p>
</div>
<div id="contact_us" class="tab">
  <h3>Contact Us</h3>
  <p>Page Under Construction</p>
</div>

CSS

/* Styles go here */

.tab {
  display: none;
}

.tabing-content {
  position: relative;
}

.tabing-content ul {
  list-style-type: none;
  font-size: 0;
  margin: 0;
  padding: 0;
}

.tabing-content ul li {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
}

.tabing-content ul li:first-child a {
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
}

.tabing-content ul li:last-child a {
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
}

.tabing-content ul li a {
  text-decoration: none;
  font: bold 14px Helvetica, Sans-Serif;
  padding: 10px;
  color: #000;
  background-color: rgba(0, 0, 0, 0.2);
  transition: all linear 0.15s;
  display: block;
}

.tabing-content ul li a:hover,
.tabing-content ul li a.active {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.tab.active {
  display: inherit;
  clear: both;
  border: 1px solid black;
  width: 500px;
  padding: 10px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
}

JavaScript

// Code goes here

$(document).ready(function() {
  $('.tabing-content ul li a').click(function() {
    var tab_id = $(this).attr('href');
    $('.tabing-content ul li a').removeClass('active');
    $('.tab').removeClass('active');
    $(this).addClass('active');
    $(tab_id).addClass('active');
  });
});