Pure CSS Tabs

dabblet.css

/**
 * Pure CSS Tabs
 */

ul {
	padding:0;
}

.tabs {
    position: absolute;
    top: 10px;
    left:10px;
    bottom:10px;
    right:10px;
}

.tab {
    display: inline-block;
}

.tab > a {
    color:white;
    position: relative;
    top: 11px;
    text-decoration:none;
    height: 40px;
    background-color: silver;
    padding: 10px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-radius: 5px 5px 0 0;
    border: 1px solid #333;
    z-index: 4;
}

.tab > a:hover {
    color:black;
    text-decoration:none;
}

.tab:target a{
    border-bottom:0;
    top: 12px;
}

.tab > section {
    position:absolute;
    top:40px;
    left:0;
    right:0;
    bottom:0;
    padding:0;
    border: 1px solid #333;
    background-color: silver;
    z-index: 1;
}

.tab:first-child > section {
    z-index: 2;
}

.tab:target > section {
    z-index: 3;
}​

dabblet.html

<ul class="tabs toptabs">
    <li class="tab" id="firstTab">
        <a href="#firstTab">First tab</a>      
        <section>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </section>
    </li>
    <li class="tab" id="secondTab">
        <a href="#secondTab">Second tab</a>     
        <section>
            Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.
        </section>   
    </li>
    <li class="tab" id="thirdTab">
        <a href="#thirdTab">Third tab</a>   
        <section>
            Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
        </section>     
    </li>
    <li class="tab" id="fourthTab">
        <a href="#fourthTab">Fourth tab</a>     
        <section>
            Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.
        </section>   
    </li>
</ul>​

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}