JSFiddle - React, Tailwind, and code Playground

by Kiya_Iekret

HTML

<body>
	<div class="tabs">
		
		<div class="tab" id="tab1">
			<a href="#tab1">Tab 1</a>
			<div class="content">
				Content of Tab1
			</div>
		</div>
		
		<div class="tab" id="tab2">
			<a href="#tab2">Tab 2</a>
			<div class="content">
				Content of Tab2
			</div>
		</div>
		
		<div class="tab" id="tab3">
			<a href="#tab3">Tab 3</a>
			<div class="content">
				Content of Tab3
			</div>
		</div>

	
	</div>
</body>

CSS

.tabs
{
	position: relative;
    clear: both;
}

.tabs .tab
{
	float: left;
	margin-right: 10px;
}

.content
{
	position: absolute;
	background-color: white;
	width: 100%;
	left: 0px;
}

.tabs .tab:nth-of-type(1) .content
{
	z-index: 1;
}

.tab:target a
{
	font-weight: bold;
}

.tab:target .content
{
	z-index: 1;
}