Understanding Tabs

dabblet.css

/**Understanding Tabs
 * The first commented line is your dabblet’s title
 */
body {
font: 18px Georgia,serif;
margin: 6em 0 0;
}

.tabs {
display: block;
margin: 0 auto;
position:relative;
width: 15em;
}

.one-tab {
position:absolute;
}
.one-tab h2 {
background-color: #DDD;
border-radius: 5px 5px 0 0;
line-height: 2em;
left: -1em;
margin: 0;
padding: 0;
position: relative;
top: -1.5em;
width: 6em;
}
.one-tab h2 {
width: 4em;
text-align: center;
z-index:1;
}

.one-tab:first-child h2 {
left: 3.25em;
}

.one-tab:nth-child(2) h2 {
left: 7.5em;
}

.one-tab h2 a {
display:inline-block;
text-decoration:none;
color: darkgray;
width:100%;
}

.one-tab p {
background-color: #FFF;
box-sizing: border-box;
margin: -2.3em 0 0 -1.5em;
height:0;
width:0;
overflow:hidden;
visibility:hidden;
}

.one-tab:last-child {
background-color:#FFF;
}

.one-tab:last-child h2 {
background-color:#FFF;
border: 1px solid #DDD;
border-bottom-color: #FFF
}

.one-tab:last-child h2:after {
border: 4px solid #FFF;
content: "";
display:block;
position:absolute;
width:93%;


}
.one-tab:last-child p {
border: 1px solid #DDD;
height:auto;
padding: 1em 2em;
overflow: visible;
visibility: visible;
width: 19em
}

.one-tab:target {
background-color:#FFF;
}

.one-tab:target h2 {
background-color:#FFF;
border: 1px solid #DDD;
border-bottom-color: #FFF
}

.one-tab:target h2:after {
border: 4px solid #FFF;
content: "";
display:block;
position:absolute;
width:93%;


}

.one-tab:target ~ .one-tab:last-child h2 {
background: #DDD;
border: 0;
left: -1em;
}

.one-tab:target ~ .one-tab:last-child h2:after {
border-bottom:0;
}

.one-tab:target p {
border: 1px solid #DDD;
height:auto;
padding: 1em 2em;
overflow: visible;
visibility: visible;
width: 19em
}

.one-tab:target ~ .one-tab:last-child p {
box-shadow: none;
overflow: hidden;
visibilty: hidden;
padding: 0;
border: 0;
width: 0;
height: 0;

}

dabblet.html

<div class="tabs">
	<div id="tab2" class="one-tab">
	<h2><a href="#tab2">Tab2</a></h2>
	<p>
My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?	
</p>
	</div>
	<div id="tab3" class="one-tab">
	<h2><a href="#tab3">Tab3</a></h2>
	<p>
Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.
	</p>
	</div>		
	<div id="tab1" class="one-tab">
	<h2><a href="#tab1">Tab1</a></h2>
	<p>
	If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston o;
	</p>
	</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}