JSFiddle - React, Tailwind, and code Playground

by js55 js55

HTML

<div class="tabbed">
	<div id="tabs">
		<ul class="tab_controls">
			<li><a href="#tb_payment">Payment</a></li>
			<li><a href="#tb_shipping">Shipping</a></li>
			<li><a href="#tb_returns">Returns</a></li>
			<li><a href="#tb_terms">Terms</a></li>
		</ul>
	</div>
<div class="box visible tabcontent">
	<h3>Payment Policy</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, eos, accusantium omnis repudiandae fugiat exercitationem quod quam eveniet praesentium quaerat.</p>
</div>
	<div class="box tabcontent">
		<h3>Shipping</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quo praesentium quos asperiores ut. Autem, beatae qui itaque quidem debitis.</p>
	</div>
	<div class="box tabcontent">
		<h3>Returns</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, nostrum, facere non voluptas vel placeat libero quae sapiente. Laboriosam, amet.</p>
	</div>
	<div class="box tabcontent">
		<h3>Terms</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa aut id veniam quasi incidunt! Molestias, adipisci nostrum laborum sint deleniti. </p>
	</div>
</div>

CSS

.box {
		display: none;
	}
	.box.visible {
		display: block;
	}
	.tabbed {
		background: #FFFFCC;
		border: 1px dashed #FF0000;
		overflow: hidden;
		padding: 10px;
		width: 500px;
	}
	#tabs ul {
		list-style: none outside none;
		margin: 0;
		overflow: hidden;
		padding: 0;
	}
	#tabs li {
		float: left;
	}
	#tabs ul li a {
		background: none repeat scroll 0 0 #E1E1E1;
		color: #000000;
		display: block;
		padding: 10px;
		text-decoration: none;
	}
	.tabcontent {
		background: #e1e1e1;
		border: 1px dashed #FF0000;
		margin-top: 10px;
		padding: 5px;
	}
	.tabcontent h3 {
		margin: 5px 0;
	}
	.current a {
		color: #d9673a !important;
		background: #CEDBA0 !important;
	}

JavaScript

(function($) {
		$(function() {

			$('ul.tab_controls').on('click', 'li:not(.current)', function() {
				$(this).addClass('current').siblings().removeClass('current')
					.parents('div.tabbed').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
			})

		})
	})(jQuery)