JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<div class="tabs-container">
    <ul class="tabs-menu">
        <li class="first-heading"><a href="#news">News</a></li>
        <li><a href="#events">Events</a></li>
        <li><a href="#tweets">Tweets</a></li>
        <li><a href="#blog">Blog</a></li>
    </ul>
    <div class="tab-caption">
        <div id="news" class="tab-content">
            <p>This is Job Oriented Web Design diploma course. We turn students into professionals by the virtue of our scientifically designed program that teaches you to code, manage and deliver. This course includes 10 live projects. You will have a diploma certificate along with a portfolio to show for your job.</p>
        </div>
        <div id="events" class="tab-content">
            <p>Oriented eCommerce diploma course. We turn students into professionals by the virtue of our scientifically designed program that teaches you to code, manage and deliver. This course includes 10 live eCommerce projects. You will have a diploma certificate along with a portfolio to show for your job.</p>
        </div>
        <div id="tweets" class="tab-content">
            <p>This is Job Oriented eCommerce diploma course. We turn students into professionals by the virtue of our scientifically designed program that teaches you to code, manage and deliver. This course includes 10 live eCommerce projects. You will have a diploma certificate along with a portfolio to show for your job.This is Job Oriented eCommerce diploma course. We turn students into professionals by the virtue of our scientifically designed program that teaches you to code, manage and deliver. This course includes 10 live eCommerce projects. You will have a diploma certificate along with a portfolio to show for your job.</p>
        </div>
        <div id="blog" class="tab-content">
            <p>This is Job Oriented eCommerce diploma course. We turn students into professionals by the virtue of our scientifically designed program that teaches you to code, manage and...

CSS

.tap-menu-content{margin: 0 0 25px;}
.tabs-container{}
.tabs-container ul{
	margin: 0;
	padding: 0;
    width: 100%;
    position: relative;
    z-index: 2;
}
.tabs-container ul li{
	display: inline-block;
      list-style: none;
	float: left;
}

.tabs-container ul li a{
	font-size: 18px;
	font-weight: bold;
	color: #5f5f5f;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
}
.tab-content{
  display:none;
}
#news.tab-content{
  display:block;
}
.tab-caption{
      background: #e1e1e1;
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
        border: 1px solid #c4c4c4;
        z-index: 1;
    margin-top: -1px;
  
}
.tabs-container ul li.current, .tabs-container ul li.active{
  border: 1px solid #c4c4c4;
      border-bottom: none;
    background: #e1e1e1;
    color: #2654a1;
}
.tabs-container ul li.first-heading a,.tabs-container ul li.current a{
    color: #2654a1;
}

JavaScript

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