Tabs

dabblet.css

/**
 * Tabs
 */


body {
	background: rgb(234, 234, 234);
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAANlBMVEXn5+fo6Ojp6enk5OTy8vLx8fHr6+vl5eXv7+/j4+Pu7u7w8PDm5ubs7Ozq6urt7e3i4uLz8/PoUfk0AAAEvElEQVR4XpWWW6pgNwwE9X7L9tn/ZgP5yBBIhrk7kERVtyAYq1mDQppBgWBYHpjooYCv9jvjdUCVmL+pPUCEg+bfs7zC6Xkqbl28PQuKtMOS/W325e6NBGAGp/W4iF9RF6uBCR4x7IGkc/SWyOd6o4EvAviDatBbTd18ga97CiI8lQt+roBQE39bsObYBGBnIOdYh6DDfn4TaoDZAigVWsbz4CbX0UFKmINoFliorsKb/s37ZPkGwrEEjvMQ4X7T72YmQDyU3Wfgl9joYI2J2ErhQZKQpL6HobarN6YSPpHnSVpRx0FuUlbd+K677frf04A+dxH75oUS1NWE07f56zi2387Vjx/jHJpvsAfPh/f2mE5BJXh+RpcEZQJolskTCtrH0eUl4fGe8ezDKA2M0Op0Y72ONFwojnvrdsYK6Rx+kJNxYVVylOc1oOcNo+EXijdJT/uVR50mR3YYuJBiygq4F67D+d5WMVbN8fedW2J2BZkq6RtUGN+IsD5jBhcX8jy3HN3cKwLSmljVWXSU5I7XVWkDjMJxDlmA5c+a4aadnLW0g3WOnwjiszEe9gh0p1BURhEMsHN40t5s6D3Pj/EAN908G9WpmsYn3IeaxeBDNoaX5HlI32fHL0wDoHHMWyX5dPlAdG7kXIBfvKVODBOPcManbcoFDybKVHt6nqshLYjjHIaawg8CbPhQaNmFDM4EQ8+qfXQ89s5DBeRmvcPkCFXuSggTg5V9YylPzWb4XMhKBPwu2DyBk/bwI8lT9xW9yzHHPoGJRNtBNsm8UqOb8APqzyouF4Bq0L11V5La4u57H9zWCuUAMDhsdrv6TdT6FuAHw8dU/DIV3YdYojr/TwW0Ijn9hAFQT0JKO2L3Ll+DrCFJaKLSGbxaezfj7MdaSAr0TnyCIIKbq7BG/npTgMqE28sB90s9QtdnKOGJvZFspE3LgdOCkIi2QiSuk30Plp08kTtHAn7d+wmtp3qesNQW5SN+DXs/OOfXzvCdVF0TqiIA2GCc6E7Is0lzDe5FsqKg+S4gPYCFU1TzpaSBepyAb8ARxT2kt98t4Ve6qE6iCOFSmCp1jleQs5QQwJEutcFzOcUrb+csyGsvkJUnAPVej4X4F8QGERc8Pr6qlKN13kKi1NUECAzpRlZ4afQSg2x9rsb1dg1ofyqRjZxnojbh6OXbMEwZcZB8zR9mE+AtBtI1E8OqtC+h8CNQ613V8JEvJ7ZpnWBQghBkdt2U05+W6umFlJ/FcaXDgf8MRPbARvjGjJgPCb76B0boJYK+xAIzpHg6/cb045g+wJmXhR9fBkMnnweoF88Qy3lU39PDD+rT1QfhMdGMJ5n0fKyLhKDwfmwyAPsuqhmKfin3cgH+vtmxn6MgP3t1jl+QChr2bxEWjir0jBcYhURPksO/hNMSL9R024AwODowZjtPT9QgDckBO5qIvG1lcRFoLQJQk0eMSbCl+6ASInvhOkItHfy2972w6/LsuQUlOD43KRR1zUNThwy/4AZ3zlZhR3FfvnpbArBTovNCkatyG0dr+r3kH1xkc8tuPdVPWYFf9YrFWWZjarbLKpF+9PCmQno47QnqJ0io9hVT/05vqLf2isDlQMSfPEF/AXZNTAEejRwFAAAAAElFTkSuQmCC);
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.content, nav ul li a {
	background-color: rgb(226, 204, 183);
}

nav ul li a:hover {
	background-color: rgb(221, 160, 126);
}

.content {
	padding: 15px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 5px #888;
	-moz-box-shadow: 0px 0px 5px #888;
	-o-box-shadow: 0px 0px 5px #888;
	-ms-box-shadow: 0px 0px 5px #888;
	box-shadow: 0px 0px 5px #888;
	position: relative;
	z-index: 10;
	width: 90%;
}

nav {
	clear: both;
	position: relative;
	z-index: 15;
	overflow: hidden;
	height: 65px;
	width: 500px;
	margin-left: 15px;
	padding: 0 4px;
}

nav ul {
	width: 100%;
	display: table;
	-webkit-box-shadow: 0px 0px 5px #888;	
	-moz-box-shadow: 0px 0px 5px #888;
	-o-box-shadow: 0px 0px 5px #888;
	-ms-box-shadow: 0px 0px 5px #888;
	box-shadow: 0px 0px 5px #888;
	padding: 0;
}

nav ul li {
	display: table-cell;
}

nav ul li a {
	height: 50px;
	font-size: 20px;
	font-weight: bold;
	display: block;
	color: rgb(238, 65, 48);
	line-height: 200%;
	text-align: center;
	text-decoration: none;
	-webkit-transition: background-color 0.1s linear;
	-moz-transition: background-color 0.1s linear;
	-o-transition: background-color 0.1s linear;
	transition: background-color 0.1s linear;
}

nav ul, nav ul li:first-child a {
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}

nav ul, nav ul li:last-child a {
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
}

dabblet.html

<nav>
	<ul>
		<li><a href="#">First tab</a></li>
		<li><a href="#">Second one</a></li>
		<li><a href="#">The third</a></li>
	</ul>
</nav>

<div class="content"><p>Proin bibendum urna id ipsum pulvinar eu blandit nisi blandit. Fusce eget eros lacus, ac tristique quam. Phasellus tincidunt urna eget elit venenatis tincidunt. Praesent odio ligula, pretium ut aliquam nec, aliquam id ipsum. Fusce est augue, faucibus sit amet feugiat id, lobortis quis dolor. Vestibulum congue suscipit venenatis. Quisque turpis risus, placerat ac commodo sit amet, mattis vitae libero. Sed tincidunt imperdiet turpis vel dapibus. Suspendisse accumsan nunc ut risus vehicula rhoncus. Donec eu erat eget metus placerat congue eu id quam. Etiam eros purus, pellentesque et ornare vel, egestas eu arcu.</p></div>

settings.json

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