Just a container to set the width and positioning of tabs block

dabblet.css

.container{
/* Just a container to set the width and positioning of tabs block */
margin:2em auto 0;
position:relative;
width:80%;
}
.reset{
/* just the reset link. Nothing to see here */
background:pink;
display: inline-block;
margin: 2em 0;
padding: 0.5em 1em;
text-align: center;
}


/* Tab Styles */
.tabs{
overflow:hidden;
position:relative;
width:100%;
}
.tab-wrap{
width: 200%;
float:right;
}
.tabs .tab-block:first-child .tab{
margin-left:50%;
}
.tabs .tab-block{
display:inline;
}
.tabs .tab{
border:1px solid transparent;
display:inline-block;
font-size:1.2em;
margin:0 0.3em -1px 0;
}
.tabs .tab a{
background:#efefef;
color:#999;
display:inline-block;
padding:0.5em 1.5em;
}
.tabs :target ~ .tab,
.tabs .target .tab{
border:1px solid #D9D9D9;
border-bottom:1px solid #FFF;
}
.tabs :target ~ .tab a,
.tabs .target .tab a{
background:#FFF;
color:#333;
}
.tabs .tab-content{
display:none;
float:left;
margin:0;
width:50%;
}
.tabs .tab-content-inner{
/* background:#FFF; */
background:yellow;
border:1px solid #D9D9D9;
padding:1em;
}
.tabs .tab-block:first-child > .tab-content{
background:green;
display:block;
/* margin-right: -50%;
margin-left: 50%; */
}
.tabs :target ~ .tab-content{
display:block;
}
.tabs .anchor{
/* fixed position anchor to keep page from scrolling */
position:fixed;
left:-999em;
top:0;
}

dabblet.html

<div class="reset"><a href="#">reset</a></div>
<p>CSS-only tabs (no javascript)</p>
<div class="container">
    <div class="tabs">
            <div class="tab-wrap">
               <div class="tab-block">
                  <a id="tab1" name="tab1" class="anchor"></a>
                  <h2 class="tab"><a href="#tab1">Tab 1</a></h2>
                  <div class="tab-content">
                     <div class="tab-content-inner">
                        <p>Suspendisse eget sapien est. Donec egestas consectetur felis, a suscipit nisl consequat et. Suspendisse potenti. Aenean tincidunt, mi eu accumsan tristique, sem leo consequat velit, vel suscipit turpis mauris quis mi. Cras suscipit cursus elit a feugiat. Sed porttitor suscipit nisi in pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ultrices facilisis est, vel consectetur orci elementum non. Integer facilisis elit at lectus facilisis adipiscing. Sed vulputate lobortis accumsan.</p>
                     </div>
                  </div>
               </div>
               <div class="tab-block">
                  <a id="tab2" name="tab2" class="anchor"></a>
                  <h2 class="tab"><a href="#tab2">Tab 2</a></h2>
                  <div class="tab-content">
                     <div class="tab-content-inner">
                        <p>Fusce viverra neque vitae nulla imperdiet feugiat vel ac nisi. Ut placerat auctor enim, eu vulputate nibh dignissim ut. Donec quis sem orci. Quisque varius vestibulum libero, sit amet varius nisl interdum nec. Vivamus sagittis ornare egestas. Curabitur placerat, nulla rhoncus molestie ultrices, eros dui accumsan turpis, vel convallis neque tortor quis tellus. Pellentesque auctor viverra libero et dignissim. Curabitur faucibus pellentesque ligula, eget convallis nulla semper id. Aliquam hendrerit eleifend mi, ac aliquet elit auctor et. Aliquam erat volutpat. Aliquam elementum leo eget tellus pulvinar rutrum. Ut pharetra augue id tortor vehicula elementum. Cras sed lorem justo. Curabitur hendrerit ipsum sed libero varius mollis. Fusce tristique venenatis nisi vitae consectetur. Nullam cursus lectus sit amet erat sagittis id porta nibh aliquet.</p>
                     </div>
                  </div>
               </div>
               <div class="tab-block">
                  <a id="tab3" name="tab3" class="anchor"></a>
                  <h2 class="tab"><a href="#tab3">Tab 3</a></h2>
                  <div class="tab-content">
                     <div class="tab-content-inner">
                        <p>Aliquam ac tellus arcu. Vivamus ut quam justo. Sed et auctor eros. Quisque ut neque massa. Sed fermentum cursus elit a vestibulum. Duis cursus, quam non imperdiet feugiat, dolor nunc rutrum nulla, a mattis augue ante a massa. Nulla quis odio nisi, ac suscipit risus. Integer consectetur, metus id fermentum venenatis, turpis dui luctus est, id dictum odio nisi ut elit. Duis id orci eget erat egestas sodales at sit amet lorem. Cras sed massa at ante iaculis ornare. Morbi in arcu at tellus porttitor tincidunt. Quisque eget lorem sed lacus congue condimentum. Duis vulputate pretium purus sed gravida. Curabitur laoreet, nisi vel tempor feugiat, urna ante sodales magna, fermentum sagittis tellus purus non ipsum.</p>
                     </div>
                  </div>   
               </div>        
               <div class="tab-block">
                  <a id="tab4" name="tab4" class="anchor"></a>
                  <h2 class="tab"><a href="#tab4">Tab 4</a></h2>
                  <div class="tab-content">
                     <div class="tab-content-inner">
                        <p>Praesent scelerisque porttitor lectus, vitae pellentesque massa posuere in. Mauris semper, urna at venenatis semper, est nulla posuere lorem, euismod faucibus velit metus varius nunc. Suspendisse nec iaculis libero. Maecenas iaculis purus nec massa tristique sed placerat tortor sagittis. Cras lacus erat, placerat ac laoreet eu, lacinia a massa. Donec et nulla nisl, nec vestibulum ante. Pellentesque pretium leo sem, ac sodales urna. Nulla nec magna dui, quis condimentum odio. Nullam tempus nibh ac orci varius vulputate. Aliquam pellentesque ullamcorper lectus, at varius risus commodo quis. Duis interdum risus at nunc imperdiet quis sagittis nisi commodo. Nunc eget neque in nibh commodo bibendum.</p>
                     </div>
                  </div>
               </div>
            </div><!-- /.tab-wrap -->
         </div><!-- /.tabs -->
</div><!-- /.container -->

settings.json

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