JSFiddle - React, Tailwind, and code Playground

HTML

<div class="group">
	<input type="radio" name="block" id="i1" class="input" checked>
	<input type="radio" name="block" id="i2" class="input">
	<input type="radio" name="block" id="i3" class="input">
	<input type="radio" name="block" id="i4" class="input">
	<input type="radio" name="block" id="i5" class="input">
	<label for="i1" class="label" data-id="i1">№1</label>
	<label for="i2" class="label" data-id="i2">№2</label>
	<label for="i3" class="label" data-id="i3">№3</label>
	<label for="i4" class="label" data-id="i4">№4</label>
	<label for="i5" class="label" data-id="i5">№5</label>
	<div class="body" data-id="i1">
		<p>Однажды, один старый шаман собрал свое племя у костра и сказал: "Послушайте старинную сказку, которая показывает, на что-то из того, про что нельзя рассказать, и рассказывает про то, на что нельзя указать".</p>
		<p>Пока все пытались понять смысл, того, что они услышали, шаман раскурил трубку и начал свой рассказ:</p>
		<p>Поехала одна мама со своим сыном на юг отдыхать. Долго ли, коротко ли, добрались до щели в горах, расставили палатку, живут.</p>
		<p>Пошел, однажды, мальчик погулять по лесу и встретился ему енот. Мальчик кричит еноту: "Уходи прочь с дороги!". Енот и не подумал уходить, встал на задние лапы и страшно завращал своими глазищами. Мальчик испугался и убежал.</p>
		<p>Прибежал мальчик к своей маме, рассказал ей про свою встречу с Енотом и заплакал.</p>
		<p>— Почему ты плачешь? - спросила мама.<br>
		— Мама, кто трусливее, я или енот?<br>
		— Конечно ты, Енот тебя не испугался, а ты его испугался.<br>
		Мальчик заплакал еще сильнее.<br>
		— Тебе осталось только одно, найти енота, убить, и съесть его сердце, - странным голосом сказала мама.</p>
	</div>
	<div class="body" data-id="i2">
		<p>Мальчик взял свой складной ножик, бутылочку с кока-колой и пирожок, положил их в свой рюкзачок и пошел в лес. Бродил мальчик по горам, бродил, и нашел берлогу енотов. Посветив фонариком он увидел, что в берлоге сидит Енот со своей енотихой и...

CSS

.group {
	padding: 30px;
	text-align: justify;
	text-justify: newspaper;
	font-size: 0;
}
.group:after {
	content: "";
	display: inline-block;
	width: 100%;
}
.input {
	display: none;
}
.label {
	display: inline-block;
	box-sizing: border-box;
	width: 10%;
	padding: 0 20px;
	border: 2px solid #369;
	border-radius: 10px;
	font-size: 1.5rem;
	text-align: center;
	cursor: pointer;
}
.label:hover {
	color: #fff;
	background: #369;
	box-shadow: 0 0 10px #369;
}
.body {
	box-sizing: border-box;
	display: none;
	width: 100%;
	padding: 30px 0 0;
	font-size: 1.5rem;
	text-align: left;
}
#i1:checked ~ [data-id="i1"].body,
#i2:checked ~ [data-id="i2"].body,
#i3:checked ~ [data-id="i3"].body,
#i4:checked ~ [data-id="i4"].body,
#i5:checked ~ [data-id="i5"].body {
	display: inline-block;
}
#i1:checked ~ [data-id="i1"].label,
#i2:checked ~ [data-id="i2"].label,
#i3:checked ~ [data-id="i3"].label,
#i4:checked ~ [data-id="i4"].label,
#i5:checked ~ [data-id="i5"].label {
	border-color: #f30;
	color: #fff;
	background: #f60;
	box-shadow: 0 0 10px #f60;
}