Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header>
    <h1>Pure CSS responsive tabset with dynamic height</h1>
  <p class="sup">A responsive re-work of the code from <a class="link" href="https://tympanus.net/codrops/2012/04/12/animated-content-tabs-with-css3/" target="_blank">this great demo</a>.</p>
</header>

<section class="tabs">
 
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">Tab 1</label>

    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">Tab 2</label>

    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3"/>
    <label for="tab-3" class="tab-label-3">Tab 3</label>

    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4"/>
    <label for="tab-4" class="tab-label-4">Tab 4</label>

    <!--<div class="clear-shadow"></div>-->

    <div class="content">
      <div class="content-1">
        <h2>Tab 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia leo sit amet diam varius, ac maximus turpis volutpat. Cras interdum nulla orci, eget convallis tellus mollis ac. Quisque nunc mi, vulputate eget mi id, fringilla rhoncus dui. Morbi rhoncus accumsan rhoncus. Pellentesque ac tellus orci. Mauris facilisis sem eu auctor congue. Praesent at nunc leo. Cras ultricies, orci a placerat auctor, felis erat egestas enim, non porttitor lacus metus at nibh. In sit amet lectus fermentum, gravida turpis nec, dapibus arcu. Cras at nisi faucibus, condimentum odio id, mattis justo. Duis malesuada diam rutrum risus dignissim interdum.</p>
      </div>
      <div class="content-2">
        <h2>Tab 2</h2>
        <p>Aenean tristique hendrerit sapien in porta. Aliquam feugiat luctus blandit. Cras nunc ex, egestas in consequat ac, egestas vitae lectus. Nunc convallis purus sed ex pretium, sit amet dapibus lorem efficitur. Nulla facilisi. Vivamus ut metus purus. Nam tincidunt faucibus dolor, eget aliquet justo. Nullam turpis ipsum, gravida non lacinia ac, condimentum in sapien. Praesent vulputate dolor ac interdum semper. Nullam sed odio semper, tempor libero ut, pharetra enim. Donec at mattis dolor, eget varius turpis. Aliquam erat volutpat. Nulla bibendum rhoncus felis sed accumsan.			</p>
  <p>
  Suspendisse vulputate, leo sed cursus feugiat, ipsum odio accumsan diam, iaculis volutpat enim ligula et lacus. Donec hendrerit pellentesque lectus, tempus gravida orci vulputate ut. Vivamus sed vehicula libero, id imperdiet tellus. Etiam lacinia felis vitae vulputate condimentum. Duis vitae pulvinar elit, ac iaculis mauris. Pellentesque tincidunt interdum elementum. Nunc dictum volutpat mauris, in interdum sem tincidunt eget. Morbi vitae ipsum scelerisque, condimentum magna gravida, eleifend risus. Phasellus ac placerat eros, ac auctor sem. Etiam id orci tempor, suscipit felis vel, ultrices ex. Quisque tempus fringilla libero id aliquam. Quisque et sapien enim. Vestibulum laoreet lacus sit amet efficitur commodo. Mauris lacinia magna at sapien lacinia fringilla ac viverra nibh. Suspendisse tristique consectetur arcu sed pulvinar.</p>
      </div>
      <div class="content-3">
        <h2>Tab 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia leo sit amet diam varius, ac maximus turpis volutpat. Cras interdum nulla orci, eget convallis tellus mollis ac.</p>
      </div>
      <div class="content-4">
        <h2>Tab 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia leo sit amet diam varius, ac maximus turpis volutpat. Cras interdum nulla orci, eget convallis tellus mollis ac. Quisque nunc mi, vulputate eget mi id, fringilla rhoncus dui. Morbi rhoncus accumsan rhoncus. Pellentesque ac tellus orci. Mauris facilisis sem eu auctor congue. Praesent at nunc leo. Cras ultricies, orci a placerat auctor, felis erat egestas enim, non porttitor lacus metus at nibh. In sit amet lectus fermentum, gravida turpis nec, dapibus arcu. Cras at nisi faucibus, condimentum odio id, mattis justo. Duis malesuada diam rutrum risus dignissim interdum.</p>
        <p>
  Aenean tristique hendrerit sapien in porta. Aliquam feugiat luctus blandit. Cras nunc ex, egestas in consequat ac, egestas vitae lectus. Nunc convallis purus sed ex pretium, sit amet dapibus lorem efficitur. Nulla facilisi. Vivamus ut metus purus. Nam tincidunt faucibus dolor, eget aliquet justo. Nullam turpis ipsum, gravida non lacinia ac, condimentum in sapien. Praesent vulputate dolor ac interdum semper. Nullam sed odio semper, tempor libero ut, pharetra enim. Donec at mattis dolor, eget varius turpis. Aliquam erat volutpat. Nulla bibendum rhoncus felis sed accumsan.</p>
        <p>
  Suspendisse vulputate, leo sed cursus feugiat, ipsum odio accumsan diam, iaculis volutpat enim ligula et lacus. Donec hendrerit pellentesque lectus, tempus gravida orci vulputate ut. Vivamus sed vehicula libero, id imperdiet tellus. Etiam lacinia felis vitae vulputate condimentum. Duis vitae pulvinar elit, ac iaculis mauris. Pellentesque tincidunt interdum elementum. Nunc dictum volutpat mauris, in interdum sem tincidunt eget. Morbi vitae ipsum scelerisque, condimentum magna gravida, eleifend risus. Phasellus ac placerat eros, ac auctor sem. Etiam id orci tempor, suscipit felis vel, ultrices ex. Quisque tempus fringilla libero id aliquam. Quisque et sapien enim. Vestibulum laoreet lacus sit amet efficitur commodo. Mauris lacinia magna at sapien lacinia fringilla ac viverra nibh. Suspendisse tristique consectetur arcu sed pulvinar.</p>
      </div>
    </div>
</section>
              
            
!

CSS

              
                // Colours for header area
$blue: #3f6b9d;
$orange: #e08f24;
$white: #fefefe;
$black: #1a1a1a;

// Change the tab height
$tabHeight: 50px;
// Update this value to make changing number of tabs less painful
$numberOfTabs: 4;

@mixin single-transition($property:all, $speed:150ms, $ease:ease, $delay: 0s){  
  -webkit-transition: $property $speed $ease $delay;  
  transition: $property $speed $ease $delay;
}

body{  
  background: #1a1a1a;
  font-family: sans-serif;
  text-align: center;
  color: $white;
  overflow-y: scroll;
}

a{
  text-decoration: none;
  &.link{
    color: $blue;
    @include single-transition();
    &:hover{
      color: $orange;
    }
  }
}

p{
  margin-bottom: 10px;
}

header{
  margin: 60px 0 40px;
  h1{
    margin-bottom: 0px;
  }
  .sup{
    font-style: italic;
    color: #999;
    margin-top: 4px;
  }
}

.tabs {
  position: relative;
  margin: 40px auto;
  width: 1024px;
  max-width: 100%;
  overflow: hidden;
  padding-top: 10px;
  margin-bottom: 60px;
  input{
    position: absolute;
    z-index: 1000;
    width: 100% / $numberOfTabs;
    height: $tabHeight;
    left: 0;
    top: 0;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    cursor: pointer;
    margin: 0;
    &#tab-2{
      left: 25%;
    }
    &#tab-3{
      left: 50%;
    }
    &#tab-4{
      left: 75%;
    }
  }
}

.tabs label {
  background: $blue;
  color: $white;
  font-size: 15px;
  line-height: $tabHeight;
  height: $tabHeight + 10;
  position: relative;
  top: 0;
  padding: 0 20px;
  float: left;
  display: block;
  width: 100% / $numberOfTabs;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
  box-sizing: border-box;
  @include single-transition();
  &:hover{
    cursor: pointer;
  }
}

.tabs label:after {
  content: '';
  background: $white;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  display: block;
}

.tabs input:hover + label {
  background: $orange;
}
.tabs label:first-of-type {
  z-index: 4;
}
.tab-label-2 {
  z-index: 4;
}
.tab-label-3 {
  z-index: 3;
}
.tab-label-4 {
  z-index: 2;
}

.tabs input:checked + label {
  background: $white;
  color: $black;
  z-index: 6;
}

.clear-shadow {
  clear: both;
}

.content {
  height: auto;
  //width: 100% * $numberOfTabs;
  width: 100%;
  float: left;
  position: relative;
  z-index: 5;
  background: $white;
  top: -10px;
  box-sizing: border-box;
  div{
    position: relative;
    float: left;
    width: 0;
    height: 0;
    box-sizing: border-box;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    background: $white;
    h2{
      margin-top: 0;
    }
  }
}

.tabs .tab-selector-1:checked ~ .content .content-1,
.tabs .tab-selector-2:checked ~ .content .content-2,
.tabs .tab-selector-3:checked ~ .content .content-3,
.tabs .tab-selector-4:checked ~ .content .content-4{
  z-index: 100;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  //width: 100% / $numberOfTabs;
  width: 100%;
  height: auto;
  width: 100%;
  height: auto;
  padding: 5%;
}

.content div h2{
  color: $blue;
}

.content div p {
  font-size: 14px;
  line-height: 22px;
  font-style: italic;
  text-align: left;
  margin: 0;
  color: #777;
  padding-left: 15px;
  border-left: 8px solid rgba(63,148,148, 0.1);
}

// For larger screens
@media screen and (min-width: 768px){
  .tabs input:checked + label {
    top: -5px;
  }
}

// For smaller screens
@media screen and (max-width: 767px){
  .tabs{
    height: auto;
    background: $white;
    padding-bottom: $tabHeight * $numberOfTabs;
    width: 95%;
    label{
      text-align: left;
    }
    input:checked + label {
      padding-left: 30px;
    }
    label, input{
      width: 100%;
      position: absolute;
      &.tab-label-1, &#tab-1{
        width: 100% - $numberOfTabs * 3;
        top: $tabHeight * 3;
        left: 0;
        height: $tabHeight * 1;
        z-index: 4 !important;
      }
      &.tab-label-2, &#tab-2{
        width: 100% - $numberOfTabs * 2;
        top: $tabHeight * 2;
        left: 0;
        height: $tabHeight * 2;
        z-index: 3 !important;
      }
      &.tab-label-3, &#tab-3{
        width: 100% - $numberOfTabs;
        top: $tabHeight * 1;
        left: 0;
        height: $tabHeight * 3;
        z-index: 2 !important;
      }
      &.tab-label-4, &#tab-4{
        width: 100%;
        top: 0;
        left: 0;
        height: $tabHeight * 4;
        z-index: 1 !important;
      }
    }
    .content{
      top: $tabHeight * $numberOfTabs;
    }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console