<!--HTML-->
<link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre" rel="stylesheet">

<style>
.soulcontainer { width: 500px; height: 475px; background-color: #af997b; position: relative; background-position: top center; background-size: cover; } 
.soultitle { width: 500px; height: 40px; background-color: #785c37; background-position: top center; }
.soultitletxt { font-family: Frank Ruhl Libre; font-size: 28px; }
.soulquote1 { width: 400px; height: 1px; background-color: #785c37; padding: 1px 1px 1px 1px; background-position: top center; } 

.tabs {
	position: relative;
	margin: 0 auto;
	width: 800px;
}
.tabs label {
	color: #555;
	cursor: pointer;
	display: block;
	float: left;
	width: 150px;
	height: 45px;
	line-height: 45px;
	position: relative;
	top: 2px;
	text-align: center;
}

.tabs input {
	position: absolute;
	left: -9999px;
}

#tab_1:checked  ~ #tab_l1,
#tab_2:checked  ~ #tab_l2,
#tab_3:checked  ~ #tab_l3 {
	top: 0;
	z-index: 3;
}

.tabs_cont {
	position: relative;
	z-index: 2;
	height: 230px;
}

.tabs_cont > div {
	position: absolute;
	left: -9999px;
	top: 0;
	opacity: 0;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}
#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2,
#tab_3:checked ~ .tabs_cont #tab_c3 {
	position: static;
	left: 0;
	opacity: 1;
}

</style>


<div class="soulcontainer" style="background-position: top center; background-size: cover;"><section class="tabs" style="background-position: top center;">
	<input id="tab_1" type="radio" name="tab" checked="checked" />
	<input id="tab_2" type="radio" name="tab" />
	<label for="tab_1" id="tab_l1">Tab One</label>
	<label for="tab_2" id="tab_l2">Tab Two</label>
	<div style="clear:both"></div>


<div class="tabs_cont" style="background-position: top center;">
<div id="tab_c1" style="background-position: center;">
<div class="soultitle" style="background-position: center;">
<div class="soultitletxt">NAME SURNAME
</div></div>
<div class="soulquote1" style="margin-top: 15px; style="background-position: top center;"">
</div></div>
    
<div id="tab_c2">Content of first second</div>
</div>
</section></div>