JSFiddle - React, Tailwind, and code Playground

by js55 js55

HTML

<div class="tabbed">
	<div id="tabs">
		<ul class="tab_controls">
			<li id="onetab" class="selected-tab"><a href="#one" onclick="one(); return false;">Payment</a></li>
			<li id="twotab" class="tab"><a href="#two" onclick="two(); return false;">Shipping</a></li>
			<li id="threetab" class="tab"><a href="#three" onclick="three(); return false;">Returns</a></li>
			<li id="fourtab" class="tab"><a href="#four" onclick="four(); return false;">Terms</a></li>
		</ul>
	</div>
	<div id="one" class="tabcontent">
		<h3>Payment Policy</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, accusamus totam in illum dolorem corporis iure id error magnam deserunt.</p>
	</div>
		<div id="two" style="display: none;" class="tabcontent">
			<h3>Shipping</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, aspernatur ratione facere expedita voluptatem excepturi nemo. Qui ipsum laudantium sit.</p>
		</div>
		<div id="three" style="display: none;" class="tabcontent">
			<h3>Returns</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quasi ipsa aliquam veniam iste velit dolor consequuntur qui aspernatur perferendis.</p>
		</div>
		<div id="four" style="display: none;" class="tabcontent">
			<h3>Terms</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum delectus non explicabo aspernatur minus asperiores voluptatem magnam ab modi nisi!</p>
		</div>
	</div>
</div>

CSS

.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;
		}
	.box {
		display: none;
		}
	.box.visible {
		display: block;
		}
	.selected-tab a {
		color: #d9673a !important;
		background: #CEDBA0 !important;
		}
	.tabcontent {
		background: #e1e1e1;
		border: 1px dashed #FF0000;
		display: block;
		margin-top: 10px;
		padding: 5px;
	}
	.tabcontent h3 {
		margin: 5px 0;
		}

JavaScript

function one()
		{
		  document.getElementById('onetab').className = 'selected-tab';
		  document.getElementById('twotab').className = 'tab';
		  document.getElementById('threetab').className = 'tab';
		  document.getElementById('fourtab').className = 'tab';

		  document.getElementById('one').style.display = 'block';
		  document.getElementById('onetab').className = 'selected-tab';
		  document.getElementById('two').style.display = 'none';
		  document.getElementById('three').style.display = 'none';
		  document.getElementById('four').style.display = 'none';
		}
		function two()
		{
		  document.getElementById('onetab').className = 'tab';
		  document.getElementById('twotab').className = 'selected-tab';
		  document.getElementById('threetab').className = 'tab';
		  document.getElementById('fourtab').className = 'tab';

		  document.getElementById('one').style.display = 'none';
		  document.getElementById('two').style.display = 'block';
		  document.getElementById('three').style.display = 'none';
		  document.getElementById('four').style.display = 'none';
		}
		function three()
		{
		  document.getElementById('onetab').className = 'tab';
		  document.getElementById('twotab').className = 'tab';
		  document.getElementById('threetab').className = 'selected-tab';
		  document.getElementById('fourtab').className = 'tab';

		  document.getElementById('one').style.display = 'none';
		  document.getElementById('two').style.display = 'none';
		  document.getElementById('three').style.display = 'block';
		  document.getElementById('four').style.display = 'none';
		}
		function four()
		{
		  document.getElementById('onetab').className = 'tab';
		  document.getElementById('twotab').className = 'tab';
		  document.getElementById('threetab').className = 'tab';
			document.getElementById('fourtab').className = 'selected-tab';

		  document.getElementById('one').style.display = 'none';
		  document.getElementById('two').style.display = 'none';
		 ...