JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
	<li class="wrap">
		<label for="a">TEST1</label>
		<input type="radio" name="a" id="a">
		<div>TEST1TEST1</div>
	</li>
	<li class="wrap">
		<label for="b">TEST2</label>
		<input type="radio" name="a" id="b">
		<div>TEST2TEST2</div>
	</li>
	<li class="wrap">
		<label for="c">TEST3</label>
		<input type="radio" name="a" id="c">
		<div>TEST3TEST3</div>
	</li>
	<li class="wrap">
		<label for="d">TEST4</label>
		<input type="radio" name="a" id="d">
		<div>TEST4TEST4</div>
	</li>
	<li class="wrap">
		<label for="e">TEST5</label>
		<input type="radio" name="a" id="e">
		<div>TEST5TEST5</div>
	</li>
</ul>

CSS

.wrap {
	margin: 1em;
	overflow: hidden;
	position: relative;
}
.wrap label {
	cursor: pointer;
}
.wrap input[type="radio"] {
	position: absolute;
	right: 100%;
}
.wrap div {
	display: none;
}
.wrap input[type="radio"]:checked + div {
	display: block;
}