JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<div id="tabs-container">
  <ul class="tabs-menu">
    <li class="current"><a href="#tab-1">Press Releases</a></li>
    <li><a href="#tab-2">Careers</a></li>
    <li><a href="#tab-3">Empanelment</a></li>
    <li><a href="#tab-4">Tenders</a></li>
    <li><a href="#tab-5">Customer Attention</a></li>
    <div class="clr"></div>
  </ul>
  <div class="tab">
    <div id="tab-1" class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauris. Integer placerat imperdiet diam, facilisis pretium elit mollis pretium. Sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies arcu risus at tellus. Donec imperdiet congue ligula, quis vulputate mauris ultrices non. Aliquam rhoncus, arcu a bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p>
    </div>
    <div id="tab-2" class="tab-content">
      <p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean...

CSS

ul.tabs-menu { float: left; width: 150px;list-style:none; }
ul.tabs-menu li { height: 35px; line-height: 35px; background: #005a23; border-bottom: 1px #fff solid; -webkit-transition: background-color 0.35s ease-out; -moz-transition: background-color 0.35s ease-out; -o-transition: background-color 0.35s ease-out; transition: background-color 0.35s ease-out; }
ul.tabs-menu li:hover { background: #ee741d; color: #fff; }
ul.tabs-menu li.current { position: relative; background-color: #fecc00; z-index: 5; }
ul.tabs-menu li a { color: #fff; text-decoration: none; display: block; font-size: 12px; padding-left: 10px; }
ul.tabs-menu .current a { color: #000; }
.tab { }
.tab-content { width: 300px; padding: 10px; display: none; float: left; border-right: 1px solid #d4d4d1; border-top: 1px solid #d4d4d1; border-bottom: 1px solid #d4d4d1; }
#tab-1 { display: block; }
.clr{ clear:both;}

JavaScript

$(document).ready(function() {
    $("ul.tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});