cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


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.

  .tabs > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
    /* Adjust the pixel value based on amount of tabs */
    height: calc(100vh - 14rem);
  @media screen and (min-width: 768px) {
  .tabs > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
    height: calc(100vh - 7.75rem);

<div class="tabs">
  <input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
  <label for="tab1" aria-hidden="true">Home</label>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo odio justo, a luctus odio auctor eget. Sed egestas metus id metus lobortis, at eleifend enim dignissim. Praesent faucibus erat at lacus pellentesque consequat. Integer porta
      rutrum mauris a imperdiet. Donec semper pharetra aliquam. Nunc cursus, massa eu accumsan egestas, eros elit lobortis mi, in laoreet ligula enim vitae ligula. In vitae tincidunt mauris. Vivamus quis vestibulum ligula. Maecenas mollis turpis vel augue
      auctor vehicula. Etiam eu quam vehicula, auctor mi vitae, laoreet nisl. </p><br/>
    <p>Curabitur eget auctor arcu. Etiam sed rhoncus nibh. Mauris tempor mauris quis dignissim porttitor. Suspendisse viverra, ante vitae placerat volutpat, eros elit posuere purus, ac feugiat leo massa et purus. Etiam ac dolor dictum, imperdiet ligula eu,
      gravida nisi. Morbi tellus lacus, ultricies ac mollis ut, dapibus in mauris. Pellentesque sed nisl fringilla, eleifend magna sollicitudin, dignissim tortor. Donec eleifend elit et enim fringilla lobortis. Nulla dignissim libero quis lorem laoreet,
      vel scelerisque lorem pellentesque. Pellentesque convallis, eros luctus fermentum scelerisque, est nisi maximus justo, vel tempus mauris quam ut lectus. </p>
  <input type="radio" name="tab-group" id="tab2" aria-hidden="true">
  <label for="tab2" aria-hidden="true">About</label>
    <h3>Fusce molestie</h3>
    <p>Fusce molestie eu nisi ut fermentum. Curabitur posuere viverra ipsum, sit amet facilisis lorem blandit sollicitudin. Aliquam erat volutpat. Donec vestibulum risus et urna ultricies, sit amet lacinia magna bibendum. Morbi ut dignissim mauris. Integer
      eu dolor quis justo efficitur aliquam non eu quam. Etiam ac dictum lacus, eu aliquet ante. Aenean vehicula mauris tempus, ultrices mi ultrices, luctus lectus. Aenean ornare libero elit, et accumsan velit cursus eget. Sed malesuada quam id risus
      pulvinar, et maximus nibh vulputate. Sed lectus urna, porta in elit sed, blandit imperdiet lacus. Ut quis mattis risus. Cras vitae aliquet lacus. </p><br/>
    <p>Pellentesque tincidunt augue augue, sit amet iaculis magna sagittis a. Ut felis risus, congue eu lacinia et, lobortis ac libero. Praesent a pulvinar mi, eget vestibulum magna. Nam vitae nisl mauris. Proin ornare tempor commodo. Integer ut nulla pulvinar,
      convallis neque sed, lobortis dolor. Vestibulum orci quam, euismod quis elit ac, volutpat rutrum dui. Suspendisse vitae magna magna. Aliquam erat volutpat. Aenean dapibus lectus lobortis mi tempor fermentum. In semper mauris nec ipsum sagittis,
      sit amet placerat leo convallis. Proin sagittis, ipsum in ultrices porta, nisi nunc vehicula enim, at mollis nisl enim id quam. Ut auctor tortor ultrices, consectetur dolor at, gravida justo. Aenean ac maximus enim, ut vulputate urna. </p>
  <input type="radio" name="tab-group" id="tab3" aria-hidden="true">
  <label for="tab3" aria-hidden="true">Contact</label>
    <h3>Morbi rhoncus</h3>
    <p>Morbi rhoncus porttitor vestibulum. Aenean volutpat vulputate maximus. Etiam in tellus quis velit semper sollicitudin non quis turpis. Suspendisse blandit ultrices quam vel accumsan. Cras cursus pharetra arcu quis tristique. Praesent elementum mi
      urna, at suscipit felis blandit id. Nullam eget tristique sapien, sit amet fermentum nulla. Mauris tincidunt sagittis nibh, sed pulvinar ipsum euismod non. Fusce elementum nisi sed turpis luctus tincidunt. Vivamus rutrum pellentesque nibh eget mollis.
      Morbi quis convallis erat. Quisque nec tortor eget lectus semper congue. Duis lacinia vestibulum quam, nec volutpat orci efficitur eu. Cras a lacinia nisi. Ut dignissim ante nisi, sed feugiat sapien euismod sed. Nam volutpat tincidunt hendrerit.
    <p>Donec sed est cursus, volutpat lorem vel, feugiat dolor. Quisque a ligula tincidunt, porttitor lorem cursus, scelerisque mi. Vivamus enim diam, laoreet in turpis quis, ullamcorper gravida lacus. Quisque quis pulvinar risus, ac pellentesque diam. Suspendisse
      suscipit blandit turpis sit amet ultricies. Maecenas ultricies eros vel pretium tempor. Vivamus tristique rhoncus lacus at vulputate. Proin iaculis, nisi eu efficitur ornare, neque leo ullamcorper nunc, non laoreet libero turpis lacinia dolor. Nulla
      sed justo sodales massa pharetra imperdiet. Duis sed iaculis est. Vivamus ut lobortis velit, id euismod risus. Pellentesque sit amet tellus eget nibh condimentum consequat. Proin dictum egestas erat, sit amet blandit elit pulvinar nec. Suspendisse
      scelerisque, ante id mollis facilisis, lacus enim mattis neque, nec accumsan nisi ipsum nec lorem. </p>
<footer style="margin-top: 0;">
  <p>Copyright &copy; Your Website 2017 | Built using <a href="https://chalarangelo.github.io/mini.css/">mini.css</a>

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................