Untitled

dabblet.css

body { font-size: 35px; font-family: Helvetica; }

.tabs { 
	background: orange; 
	margin: 0; 
	padding:0;
	position: relative;
	margin-top: -2px;
	bottom: -5px;
	z-index: 1;
}

.tabs li {
	float: left;
	background: blue;
	margin-right: 20px;
	list-style-type: none;
}

.tabs li.active {
	position: relative;
	margin-top: -5px;
	bottom: -5px;
	background: green;
	z-index: 1;
}

.item { border-top: 5px solid red; }

.tabs:before,
.tabs:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.tabs:after {clear: both;}

dabblet.html

<div class="box">
	<ul class="tabs">
	<li>One</li>
	<li class="active">Two</li>
	</ul>
	<div class="item">Item</div>
	<div class="item">Item</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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