JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<div class="tabbing">
	<h1>EXAMINATION COVERAGE INFORMATION</h1>
	<div class="left">
		<ul class="tabs">
			<li class="tab-link" data-tab="tab-1"><span class="left-list">Data Science for business Stakeholders</span> <span class="right-list">15%</span><div class="clear"></div></li>
			<li class="tab-link" data-tab="tab-2"><span class="left-list">Data Science</span> <span class="right-list">18%</span><div class="clear"></div></li>
			<li class="tab-link" data-tab="tab-3"><span class="left-list">Business Potential of Big Data</span> <span class="right-list">17%</span><div class="clear"></div></li>
			<li class="tab-link" data-tab="tab-4"><span class="left-list">Building Cross-Organizational support</span> <span class="right-list">15%</span><div class="clear"></div></li>
			<li class="tab-link" data-tab="tab-5"><span class="left-list">Data Science Fundamentals For Data Scientists </span> <span class="right-list">15%</span><div class="clear"></div></li>
			<li class="tab-link" data-tab="tab-6"><span class="left-list">Data Science Essentials For Data Scientists</span> <span class="right-list">10%</span><div class="clear"></div></li>
			<li class="tab-link current" data-tab="tab-7"><span class="left-list">Advanced Data Science For Data Scientists</span> <span class="right-list">10%</span><div class="clear"></div></li>
		</ul>
	</div>
	<div class="right">
		<div class="tab-text">
		<div id="tab-1" class="tab-content">
			<h3>Data Science for business Stakeholders</h3>
			<span class="percent-block mob">15%</span>
			<ul>
				<li>Thinking like a Data Scientist</li>
				<li>"By" Analysis Technique</li>
				<li>Score Development Technique</li>
				<li>Monetization Exercise</li>
				<li>Metamorphosis Exercise</li>
			</ul>
		</div>
		<div id="tab-2" class="tab-content">
			<h3>Data Science</h3>
			<span class="percent-block mob">18%</span>
			<ul>
				<li>Difference Between Business Intelligence and Data Science</li>
				<li>Data Science Overview</li>
				<li>The Data...

CSS

h1 {
    font-size: 1.6em;
    font-weight: bold;
    color: #005984;
}
.left {
    width: 45%;
    float: left;
    display:inline-block;
}
.right{
    width: 53%;
    float: right;
    display:inline-block;
}
ul.tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    float: left;
}
ul.tabs li {
    cursor: pointer;
    display: block;
    position: relative;
    z-index: 99;
    min-height: 46px;
    border-bottom: 1px solid #e2e2e2;
    padding: 0;
    font-weight: bold;
}
ul.tabs li span.left-list {
    float: left;
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - 75px);
}
ul.tabs li span.right-list {
    background: #999 none repeat scroll 0 0;
    float: right;
    color: #fff;
    padding: 12px 0;
    width: 50px;
    text-align: center;
}
.mob{display:none;}
ul.tabs li.current:after {
    background: rgba(0, 0, 0, 0) url(https://ik.imagekit.io/credforce/dasca/content/images/icon/gray1.png) no-repeat scroll right 0;
    content: "";
    height: 40px;
    position: absolute;
    right: -13px;
    width: 40px;
    top: 9px;
}
.tab-content {
    display: none;
    background: none;
    padding: 15px;
    border: none;
}
.tab-content.current {
    display: block;
    float: left;
    position: relative;
    width: 99%;
    padding: 0;
}

JavaScript

jQuery(document).ready(function() {
    jQuery('ul.tabs li').click(function() {
        var tab_id = jQuery(this).attr('data-tab');
        jQuery('ul.tabs li').removeClass('current');
        jQuery('.tab-content').removeClass('current');
        jQuery(this).addClass('current');
        jQuery("#" + tab_id).addClass('current');
    });
});