JSFiddle - React, Tailwind, and code Playground

by Евгений Беляков

HTML

<div id="tabs">
	<div class="tab">
        <input type="radio" name="slide" id="raz" />
        <label class="raz" for="raz">WM</label>
		<div class="tab-content">
			<div>подайте вебмани плиз</div>
		</div>
	</div>
	<div class="tab">
        <input type="radio" name="slide" id="dva" />
		<label class="dva" for="dva">ЯД</label>
        <div class="tab-content">
			<div>…или яндекс-денежков</div>
		</div>
	</div>
	<div class="tab">
        <input type="radio" name="slide" id="tri" />
		<label class="tri" for="tri">Cловом</label>
        <div class="tab-content">
			<div>…и на том спасибо</div>
		</div>
	</div>
</div>

CSS

body {
	background-color:#eee;
}
* {
	margin:0;
	padding:0;
	font-size:12px;
	line-height:20px;
}
#tabs {
	position:relative;
	width:300px;
	margin:100px 50px 50px;
	background-color:#fff;
}
#tabs label {
	position:absolute;
	height:30px;
	width:50px;
	top:-35px;
	background-color:#9cc;
	cursor:pointer;
}
#tabs .raz {
	left:10px;
}
#tabs .dva {
	left:70px;
}
#tabs .tri {
	left:130px;
}
#tabs .tab-content {
	height:0;
	overflow:hidden;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	opacity: 0;
}
#tabs input {
	display:none;
}
#tabs input:checked + label {
	background-color:#3cc;
}
#tabs input:checked + label + .tab-content {
	height:100px;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
}
#tabs .tab-content > div {
	font-size:30px;
	line-height:40px;
	height:100px;
	text-align:center;
}