PureCSS Tabs

index.html

<h1>PureCSS Tabs</h1>

<div class="pc-tab">
<input checked="checked" id="tab1" type="radio" name="pct" />
<input id="tab2" type="radio" name="pct" />
<input id="tab3" type="radio" name="pct" />
  <nav>
    <ul>
      <li class="tab1">
        <label for="tab1">First Tab</label>
      </li>
      <li class="tab2">
        <label for="tab2">Second Tab</label>
      </li>
      <li class="tab3">
        <label for="tab3">Third Tab</label>
      </li>
    </ul>
  </nav>
  <section>
    <div class="tab1">
      <h2>First</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
    </div>
    <div class="tab2">
      <h2>Second</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p>
    </div>
    <div class="tab3">
      <h2>Third</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p>
    </div>
  </section>
</div>

<footer>
  by <a href="http://rena.to/" target="_blank">rena.to</a>
</footer>
  

purecss-tabs.markdown

PureCSS Tabs

PureCSS Collection by Renato Ribeiro.

A Pen by Ezechias Emmanuel on CodePen.

License.

script.js

// PURE CSS TABS.
// 0 js lines.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

/* Component Needs */

.pc-tab > input,
.pc-tab section > div {
  display: none;
}

#tab1:checked ~ section .tab1,
#tab2:checked ~ section .tab2,
#tab3:checked ~ section .tab3 {
  display: block;
}

#tab1:checked ~ nav .tab1,
#tab2:checked ~ nav .tab2,
#tab3:checked ~ nav .tab3 {
  color: red;
}

/* Visual Styles */

$activeColor: #ffffff;
$unactiveColor: #eeeeee;
$unactiveHoverColor: #dddddd;

@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700);

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  -webkit-font-smoothing: antialiased;
  background: #ecf0f1;
  font-family: 'Raleway';
}

h1 {
  text-align: center;
  font-weight: 100;
  font-size: 60px;
  color: #e74c3c;
}

.pc-tab { 
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      label {
        font-family: "Raleway";
        float: left;
        padding: 15px 25px;
        border: 1px solid #ddd;
        border-bottom: 0;
        background: $unactiveColor;
        color: #444;
        &:hover {
          background: $unactiveHoverColor;
        }
        &:active {
          background: $activeColor;
        }
      }
      &:not(:last-child) label {
         border-right-width: 0; 
      }
    }
  }
  section {
    font-family: "Droid Serif";
    clear: both;
    div {
      padding: 20px; 
      width: 100%;
      border: 1px solid #ddd;
      background: #fff;
      line-height: 1.5em;
      letter-spacing: 0.3px;
      color: #444;
      h2 {
        margin: 0;
        font-family: "Raleway";
        letter-spacing: 1px;
        color: #34495e;
      }
    }
  }
}

#tab1:checked ~ nav .tab1,
#tab2:checked ~ nav .tab2,
#tab3:checked ~ nav .tab3 {
  label {
    background: white;
    color: #111;
    position: relative;
    &:after {
      content: '';
      display: block;
      position: absolute;
      height: 2px;
      width: 100%;
      background: $activeColor;
      left: 0;
      bottom: -1px;
    }
  }
}

footer {
  margin-top: 50px;
  font-size: 14px;
  color: #CCC;
  text-align: center;
  a {
    color: #AAA;
    text-decoration: none;
  }
}