Tab 3

by Maz Soma

HTML

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

<div class="tabs">
	<!--TAB 1-->
	<input type="radio" name="tabs" checked id="tab1" class="content1">
  <label for="tab1">
    <span>
      <span><div class="fa fa-home"></div>Tab 1
      </span>
    </span>
  </label>
  <!--TAB 2-->
	<input type="radio" name="tabs" id="tab2" class="content2">
	<label for="tab2">
    <span>
      <span><div class="fa fa-comment"></div>Tab 2
      </span>
    </span>
  </label>
  <!--TAB 3-->
	<input type="radio" name="tabs" id="tab3" class="content3">
	<label for="tab3">
    <span>
      <span><div class="fa fa-compass"></div>Tab 3
      </span>
    </span>
  </label>
  <!--TAB 4-->
	<input type="radio" name="tabs" id="tab4" class="content4">
	<label for="tab4">
    <span><span><div class="fa fa-envelope"></div>Tab 4
      </span>
    </span>
  </label>
  
  <!--CONTENT-->
  <ul>
    <!--TAB 1-->
    <li class="content1">
      <div>
      <p>
Benang-benang Doflamingo menutupi keseluruhan kerajaan. Sebuah bentuk kubah seperti sebuah sangkar burung. Seorang bajak laut mencoba melarikan diri, tapi dia lari ke arah benang yang tajam. Benang-benang itu mengiris setengah topinya dan melukainya.
      </p>
      </div>
    </li>
    <!--TAB 2-->
    <li class="content2">
      <div>
      <p>
Sementara itu Doflamingo melemparkan benang-benang ke seluruh kota “Teknik Parasite”, membuat para penduduk dan angkatan laut saling bertarung satu sama lain. Pica berasimilasi dengan tanah, memindahkan istana kerajaan menjauh dan menaikaan seluruh area ladang bunga, termasuk pabrik. Naik ke atas.
Tanah perkotaan terhisap ke penyangga yang menaikan taman bunga.
      </p>
      </div>
    </li>
    <!--TAB 3-->
    <li class="content3">
      <div>
     ...

CSS

* { margin: 0; padding: 0 }

body {
	padding: 40px;
	background: #222
}

.tabs {
	position: relative;
	font: normal normal 400 0 
    'Electrolize', Helvetica, Arial, sans-serif;
	color: #fff
}

.tabs input {display: none}

.tabs label {
	position: relative;
	z-index: 1;
	display: inline-block;
  width: 25%; /* 4 TABS = 100/4 = 25% */
	box-sizing: border-box;
  border: 1px solid #222;
  border-left-color: #555;
	font-size: 17px;
	line-height: 45px;
	cursor: pointer;
  user-select: none
}

.tabs label span {
	display: block;
	padding: 5px;
	background: #444
}

.tabs label span span {
	padding: 0 20px;
	background: transparent;
	border-radius: 3px;
	transition: background 0.4s
}

.tabs label:hover span span {background: #39a1dd}

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

.tabs input:checked + label span span {
	background: #39a1dd
}

.tabs ul {
	list-style: none;
	position: relative;
	display: block;
	font: normal normal 400 15px 
    'Roboto', Helvetica, Arial, sans-serif
}
.tabs ul li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	overflow: auto;
	padding: 25px;
	background: #444;
	box-sizing: border-box;
	opacity: 0;
  transition: all .4s;
  border-top: 1px solid #666;
  border-right: 1px solid #222
}

.tabs > .content1:checked ~ ul > .content1,
.tabs > .content2:checked ~ ul > .content2,
.tabs > .content3:checked ~ ul > .content3,
.tabs > .content4:checked ~ ul > .content4 {
  /* ADD MORE AS NEEDED */
	position: relative;
	z-index: 1;
	opacity: 1;
  transform: none
}

/* RESPONSIVE STACKING */
@media screen and (max-width: 780px) {

	.tabs label {
		display: block;
		width: 100%;
    border: 0;
		padding-right: 0;
		padding-left: 0;
		text-align: left
	}
  
	.tabs ul {
		margin-top: 0;
		margin-right: 0;
		margin-left: 0
	}
}

/* FONTAWESOME */
.fa {
  margin-right: 10px;
  font-size: 20px;
  /* vertical-align: middle */ /* FONT SIZE 20+ */
}


/* A SAMPLE EFFECT - SLIDE DOWN */
.tabs ul li {transform: translateY(30px)}

/* RANDOM STUFF FOR THE...