JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div class="tabbed-area">

	<ul class="tabs group">
	    <li><a href="#box-one">Tab 1</a></li>
	    <li><a href="#box-two">Tab 2</a></li>
	    <li><a href="#box-three">Tab 3</a></li>
	</ul>
	
	<div class="box-wrap">
	
		<div id="box-one">
            <span>111111111111111111111111</span>
		</div>
		
		<div id="box-two">
		  <span>22222222222222222222222222</span>
		</div>
		
		<div id="box-three">
		  <span>3333333333333333333333333333</span>
		</div>
	
	</div>

</div>

CSS

.tabs { list-style: none; }
.tabs li { display: inline; }
.tabs li a { color: black; float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 1px; background: white; text-decoration: none; }
.tabs li a:hover { background: #ccc; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.box-wrap { position: relative; min-height: 250px; }
.tabbed-area div div { background: white; padding: 20px; min-height: 250px; position: absolute; top: -1px; left: 0; width: 100%; }
.tabbed-area div div, .tabs li a { border: 1px solid #ccc; }

#box-one:target, #box-two:target, #box-three:target {
  z-index: 1;
}