CSS3 Flat Responsive Tabs

DEMO

HTML

<div class="tabs-wrapper">

    <input type="radio" name="tab" id="tab1" class="tab-head1" checked="checked"/>

    <label for="tab1">One</label>

    <input type="radio" name="tab" id="tab2" class="tab-head2" />

    <label for="tab2">Two</label>

    <input type="radio" name="tab" id="tab3" class="tab-head3" />

    <label for="tab3">Three</label>

    <input type="radio" name="tab" id="tab4" class="tab-head4" />

    <label for="tab4">Four</label>

<div class="tab-body-wrapper">

    <div id="tab-body-1" class="tab-body">

      <h1>Tab 1 heading</h1>

      <p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>

    </div>

    <div id="tab-body-2" class="tab-body">

      <h1>Tab 2 heading</h1>

      <p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>

    </div>

    <div id="tab-body-3" class="tab-body">

      <h1>Tab 3 heading</h1>

      <p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>

    </div>

    <div id="tab-body-4" class="tab-body">

      <h1>Tab 4 heading</h1>

      <p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>

    </div>

  </div>

</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:100,200,300);

@mixin font($font-size,$line-height) {
  font:#{$font-size}/#{$line-height} 'Raleway';
}

@mixin breakpoint($point) {
  @if $point == big {
    @media screen and (max-width: 1600px){@content;}
  }
  @else if $point == medium {
    @media screen and (max-width: 900px){@content;}
  }
  @else if $point == small {
    @media screen and (max-width: 600px){@content;}
  }
}

$tab-head-color:#525252;
$tab-checked-border-color:#B8B63E;
$tab-border-color:#4D4C47;
$tab-text-color:#DBDBD3;
$tab-checked-text-color:#F2F2F2;
$tab-hover-color:#667876;
$tab-body-wrapper-color:#F7EEC6;

html {
  @include font(1em,1.5em);
 background:url(http://luxehdwallpaper.com/wallpaper/2012/10/-Minimalistic-Wind-Lame-Blurred-Hd-Wallpaper--.jpg);
  webkit-font-smoothing: antialiased;
}

.tabs-wrapper {
  margin:5% 10% 0 10%;
  input[type=radio] {
    display:none;
  }
  label {
    transition:all 0.3s ease-in-out;
    display:inline-block;
    cursor:pointer;
    color:$tab-text-color;
    width:20%;
    @include breakpoint(big){width:15%;}
    @include breakpoint(medium){width:20%;}
    @include breakpoint(small){width:100%; display:block; border-bottom:2px solid $tab-border-color;}
    height:3em;
    background:$tab-head-color;
    text-align:center;
    line-height:3em;
 
    &:last-of-type {
      border-bottom:none;
    }
    &:hover {
      background:$tab-hover-color;
    }
  }
 
  input[type=radio]:checked {
    + label {
      background:$tab-checked-border-color;
      color:$tab-checked-text-color;
    }
  } 
  .tab-body {
    position:absolute;
    top:-9999px;
    opacity:0;
    padding:10px;
    transition:opacity 0.5s ease-in;
  }
  @include breakpoint(small){margin:0;}
}

.tab-body-wrapper {
  background:$tab-body-wrapper-color;
  border-top:$tab-checked-border-color 5px solid;
      @include breakpoint(small){border:none};
}

#tab1:checked ~ .tab-body-wrapper #tab-body-1, #tab2:checked ~ .tab-body-wrapper #tab-body-2 , #tab3:checked ~ .tab-body-wrapper #tab-body-3 , #tab4:checked ~ .tab-body-wrapper  #tab-body-4 {
  position:relative;
  top:0px;
  opacity:1;
}