pure css3

by slawe

HTML

<div class="true-tabs true-tabs-color5 true-tabs-animation9 true-tabs-vleft">
	<!--Tab 1-->
	<input type="radio" name="true-tabs" checked="" id="tab1" class="content1"><!--Checked= Tab shown-->
  <label for="tab1">
    <span>
      <span><em class="fa fa-rocket"></em>Rockets
      </span>
    </span>
  </label>
  <!--Tab 2-->
	<input type="radio" name="true-tabs" id="tab2" class="content2">
	<label for="tab2">
    <span>
      <span><em class="fa fa-font"></em>Typography
      </span>
    </span>
  </label>
  <!--Tab 3-->
	<input type="radio" name="true-tabs" id="tab3" class="content3">
	<label for="tab3">
    <span>
      <span><em class="fa fa-legal"></em>MIT License
      </span>
    </span>
  </label>
  <!--Tab 4-->
	<input type="radio" name="true-tabs" id="tab4" class="content4">
	<label for="tab4">
    <span><span><em class="fa fa-th"></em>Grids</span></span>
  </label>
  <!--Content-->
  <ul>
    <!--Tab 1-->
    <li class="content1">
      <div>
	  <h1>Still not convinced?</h1>
	  <p>A rocket is a missile, spacecraft, aircraft or other vehicle that obtains thrust from a rocket engine. Rocket engine exhaust is formed entirely from propellants carried within the rocket before use. Rocket engines work by action and reaction. Rocket engines push rockets forward by expelling their exhaust in the opposite direction at high speed. Rockets rely on momentum, airfoils, auxiliary reaction engines, gimballed thrust, momentum wheels, deflection of the exhaust stream, propellant flow, spin, and/or gravity to help control flight.</p>
<p>
Rockets are relatively lightweight and powerful, capable of generating large accelerations and of attaining extremely high speeds with reasonable efficiency. Rockets are not reliant on the atmosphere and work very well in space.</p>
<p>
Rockets for military and recreational uses date back to at least 13th century China. Significant scientific, interplanetary and industrial use did not occur until the 20th century, when rocketry was the...

CSS

@charset "UTF-8";

/***************************
****************************
Fonts
****************************
***************************/
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,300);

/* Page layout */
body {
    background: #222;
    color: #ecf0f1;
  margin-top: 3em
}
/**/



/*****************************
****************************
The Foundation
****************************
***************************/
.true-tabs * { 
	margin: 0; 
	padding: 0;
	border:0;
	background: 0 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.true-tabs {
    position: relative;
	font: 300 0px/1.5 "Open Sans","Segoe UI Light","Segoe UI Web Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol",Frutiger,"Frutiger Linotype",HelveticaNeue-Light,"Helvetica Neue", Helvetica,Arial,sans-serif;
    color: #ecf0f1;
    width: 90%; /* Modify width here */
    margin: 0 auto
}

.true-tabs input {display: none} /* Hides checkboxes */

.true-tabs label {
	font-size: 16px;
	line-height: 40px;
    z-index: 1;
	display: inline-block;
    width: 25%;
	/* Gives an inset look */
    border: 1px solid #222;
    border-left-color: #555;
	/**/
    text-align: left;
	cursor: pointer
}

.true-tabs label span {
    display: block;
    background: #404040
}

.true-tabs label span span {
    padding: 0 1em;
    background: 0 0;
	border: 2px solid transparent;
    -webkit-transition: border .4s;
    -moz-transition: border .4s;
    -o-transition: border .4s;
    transition: border .4s
}

.true-tabs input:checked+label {cursor: default}

.true-tabs ul {
    list-style: none;
    position: relative;
    display: block;
	font-size: 16px  /* Apply font-size */
}

.true-tabs ul li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: auto;
    text-align: left;
    padding: 1em 1.5em;
    background: #404040;
   ...