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;
}