JSFiddle - React, Tailwind, and code Playground

TrueTabs

by Jennifer Perrin

HTML

<h1 class="title">TrueTabs</h1>

<div class="true-tabs color2 animation1 center">
	<!--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...

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
}
.title {
  font: 3em "Open Sans";
  text-align: center;
  text-transform: uppercase
}
/**/


/***************************
****************************
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;
	word-wrap: break-word
}

.true-tabs {
    position: relative;
	font: 300 0px/1.5 "Open Sans Light","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%;
   ...