JSFiddle - React, Tailwind, and code Playground

HTML

<section>
			<input type="radio" id="tab1" name="radiobutton" checked="checked"/>
			<label for="tab1" class="tabs">Один</label>
			<input type="radio" id="tab2" name="radiobutton"/>
			<label for="tab2" class="tabs">Два</label>
			<input type="radio" id="tab3" name="radiobutton" />
			<label for="tab3" class="tabs">Три</label>
			<input type="radio" id="tab4" name="radiobutton"/>
			<label for="tab4" class="tabs">Четыре</label>
			<article class="contenttab">
			<div class="line"></div>
				Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета.
			</article>
			<article class="contenttab">
			<div class="line"></div>
				Самым известным «рыбным» текстом является знаменитый Lorem ipsum. Считается, что впервые его применили в книгопечатании еще в XVI веке. Своим появлением Lorem ipsum обязан древнеримскому философу Цицерону, ведь именно из его трактата «О пределах добра и зла» средневековый книгопечатник вырвал отдельные фразы и слова, получив текст-«рыбу», широко используемый и по сей день. Конечно, возникают некоторые вопросы, связанные с использованием Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается.
			</article>
			<article class="contenttab">
			<div class="line"></div>
				И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же...

CSS

input {
				display: none;
			}
			
			input:checked + label {
				background: #b8b63e;
				margin-bottom: 0;
				z-index: 1;
				width: 130px;
				height: 25px;
				text-align: center;
				padding-top: 10px;
				font: 16px "Open Sans", Arial, sans-serif;
				color: white;
				transition: 0.5s;
			}
			
			input:checked + label + input + label + input + label + input + label + article {
				display: block;
				
			}
			
			input:checked + label + input + label + input + label + article + article {
				display: block;
				
			}
			
			input:checked + label + input + label + article + article + article {
				display: block;
				
			}
			
			input:checked + label + article + article + article + article {
				display: block;
				
			}
			
			article {
				display: none;
				width: 800px;
				height: 100px;
				background: #f6edc5;
				position: relative;
				border-radius: 0 5px 5px 5px;
				padding: 10px;
				font: 14px "Open Sans", Arial, sans-serif;
				
			}
			
			label {
				width: 130px;
				height: 25px;
				border-radius: 5px 5px 0 0;
				border-bottom: 0;
				padding: 3px;
				display: inline-block;
				position: relative;
				background: #525252;
				cursor: pointer;
				text-align: center;
				padding-top: 10px;
				font: 16px "Open Sans", Arial, sans-serif;
				color: white;
				transition: 0.5s;
			}
			
			label:hover {
				background: #667876;
				transition: 0.5s;
			}
			

			
			section {
				position: relative;
				-webkit-animation: 0.1s hack infinite;
			}
			

			.line {
			width: 820px;
			height:5px;
			background: #b8b63e;
			position: relative;
			top: -10px;
			left: -10px;
			border-radius: 0 5px 0 0;
			}