Tabbed Areas

TAB 1 - CONTENT

Lorem ipsum dolor sit amet

TAB 2 - CONTENT

consectetur adipisicing elit

TAB 3 - CONTENT

fugit nobis qui temporibus culpa

TAB 4 - CONTENT

inventore consectetur aliquam

HTML

							
							
<div class="tabbed-areas">
 	<div class="tab-area">
		<input type="radio" name="tabs" class="tab1" id="tab1">
		<label for="tab1">Tab 1</label>
		<div class="tab-content tab_1">
			<h3>TAB 1 - CONTENT</h3>
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
	<div class="tab-area">
		<input type="radio" name="tabs" class="tab2" id="tab2" checked="checked">
		<label for="tab2">Tab 2</label>
		<div class="tab-content tab_2">
			<h3>TAB 2 - CONTENT</h3>
			<p>consectetur adipisicing elit</p>
		</div>
	</div>
	<div class="tab-area">
		<input type="radio" name="tabs" class="tab3" id="tab3">
		<label for="tab3">Tab 3</label>
		<div class="tab-content tab_3">
			<h3>TAB 3 - CONTENT</h3>
			<p>fugit nobis qui temporibus culpa</p>
		</div>
	</div>
	<div class="tab-area">
		<input type="radio" name="tabs" class="tab4" id="tab4">
		<label for="tab4">Tab 4</label>
		<div class="tab-content tab_4">
			<h3>TAB 4 - CONTENT</h3>
			<p>inventore consectetur aliquam</p>
		</div>
	</div>
</div>
							
						

CSS

							
							
.tabbed-areas input[type=radio] {
	display: none;
}
.tabbed-areas {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.tab-area:first-child label {
	border-left: 1px solid #ccc;
}
.tab-area label {
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-radius: 5px 5px 0 0;
	cursor: pointer;
	width: auto;
	padding: 0 0.5em;
	height: 41px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	position: relative;
	z-index: 1;
}
.tab-area .tab-content{
	position: absolute;
	left: 0;
	top: 40px;
	width: 100%;
	min-height: 80px;
	border: 1px solid #ccc;
	display: none;
	padding: 1em;
	z-index: 0;
	max-width: 100%;
}
.tab-area input:checked ~ label {
	border-bottom: 1px solid #a25f5e;
	color: #FFFFFF;
	background-color: #a25f5e;
}
.tab-area input:checked ~ .tab-content {
	display: block;
	color: #FFFFFF;
	background-color: #a25f5e;
}