CSS-only Tabs

<div class="tabs">
	<input type="radio" name="tabs" id="tab-1" />
	<input type="radio" name="tabs" id="tab-2" />
	<input type="radio" name="tabs" id="tab-3" />
	<ul class="labels">
		<li><label for="tab-1">Tab #1</label></li>
		<li><label for="tab-2">Tab #2</label></li>
		<li><label for="tab-3">Tab #3</label></li>
	</ul>
	<div class="tab-contents">
		<div>
			<!-- 1st tab content -->
		</div>
		<div>
			<!-- 2nd tab content -->
		</div>
		<div>
			<!-- 3rd tab content -->
		</div>
	</div>
</div>

.tabs > input {
	display: none;
}

.tabs .labels {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tabs .labels li {
	float: left;
}

.tabs .labels label {
	display: block;
	transition: all .3s linear;
}

.tabs .tab-contents > div {
	height: 0;
	opacity: 0;
	overflow: hidden;
	-webkit-transition: opacity .4s linear;
	transition: opacity .4s linear;
}

.tabs > input:nth-of-type(1):checked ~ .tab-contents > div:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ .tab-contents > div:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ .tab-contents > div:nth-of-type(3) {
	height: 100%;
	opacity: 1;
	padding: 1rem 0;
}

There is no JavaScript at all :)