JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	
	<div class="tabs">
		<div class="tab">
			<input name="checkbox-tabs-group" type="radio" id="checkbox1" class="checkboxtab" checked>
			<label for="checkbox1">Tab 1</label>
			<div class="content">
				This is the content of tab 1
			</div>
		</div>
		
		<div class="tab">
			<input name="checkbox-tabs-group" type="radio" id="checkbox2" class="checkboxtab">
			<label for="checkbox2">Tab 2</label>
			<div class="content">
				This is the content of tab 2
			</div>
		</div>
		
	</div>

</body>

CSS

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

.tabs .tab
{
	float: left;
}

.tabs .tab .content
{
	position: absolute;
	background-color: white;
	left: 0px;
	width: 100%;
	border: 1px #000 solid;
}

.checkboxtab
{
	display: none;
}

.tab label
{
	margin-right: 10px;
}

.checkboxtab:checked ~ label
{
	color: #ab70ff;
	border: 1px #000 solid;
}

.checkboxtab:checked ~ .content
{
	z-index: 1;
}