<div>
  <input type="radio" id="s1" name="s" checked/>
  <input type="radio" id="s2" name="s"/>
  <input type="radio" id="s3" name="s"/>
  <input type="radio" id="s4" name="s"/>
  <div class="tabs">
    <label for="s1">One</label>
    <label for="s2">Two</label>
    <label for="s3">Three</label>
    <label for="s4">Four</label>
  </div>
  <ul class="sections">
    <li>Section one</li>
    <li>Section two</li>
    <li>Section three</li>
    <li>Section four</li>
  </ul>
</div>
* {
  margin: 0;
  padding: 0;
}

body {
  padding: 1em;
  font-family: sans-serif;
  background-color: #777;
}

ul {
  list-style-type: none;
}

input[type=radio] {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.tabs {
  position: relative;
  z-index: 999;
  height: 42px;
  white-space: nowrap;
  font-size: 0;
}

.tabs label {
  display: inline-block;
  vertical-align: bottom;
  margin-right: 4px;
  margin-bottom: -1px;
  margin-left: -1px;
  background: #EEE;
  padding: 12px 24px; 
  border: solid 1px #DDD;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  background-color: #EEE;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  box-shadow: 0 -1px 6px rgba(0,0,0,0.1) inset;
  color: #666;
}

.tabs label:first-child {
  margin-left: 0;
}

.tabs label:hover {
  background-color: #DDD;
}

input:nth-child(1):checked ~ .tabs label:nth-child(1),
input:nth-child(2):checked ~ .tabs label:nth-child(2),
input:nth-child(3):checked ~ .tabs label:nth-child(3),
input:nth-child(4):checked ~ .tabs label:nth-child(4) {
  padding: 14px 24px;
  border-bottom-color: #FFF;
  background: #FFF;
  box-shadow: none;
  color: #000;
}

.sections {}

.sections li {
  display: none;
  height: 180px;
  padding: 1em;
  border: solid 1px #DDD;
  border-radius: 0 5px 5px 5px;
  background-color: #FFF;
  box-shadow: 1px 1px 20px rgba(0,0,0,0.4);
}

input:nth-child(1):checked ~ .sections li:nth-child(1),
input:nth-child(2):checked ~ .sections li:nth-child(2),
input:nth-child(3):checked ~ .sections li:nth-child(3),
input:nth-child(4):checked ~ .sections li:nth-child(4) {
  display: block;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.