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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <div class="flex flex-col h-screen">
  <header class="p-4 bg-gray-400">Header</header>
  <main class="p-4 flex-grow bg-gray-200">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere congue augue, eget facilisis dolor sagittis at. Sed facilisis, tellus nec vehicula hendrerit, nibh justo elementum enim, ac maximus nibh sapien nec nulla. Aliquam vel tincidunt ipsum. Etiam eleifend commodo massa vel mattis. Nulla condimentum felis sollicitudin imperdiet tincidunt. Etiam scelerisque nisl mollis sem dapibus, sit amet porta ex vehicula. In hac habitasse platea dictumst. Suspendisse iaculis nisl eget turpis ullamcorper pellentesque. Aenean a mauris sed ligula ultricies pretium. Ut tincidunt lacus a efficitur consectetur. Nunc viverra facilisis nisi, ac aliquet metus faucibus eu. Maecenas interdum quis magna id dapibus. Donec dictum leo dignissim mauris feugiat tristique. Etiam ornare metus est, ut ornare velit porttitor a.

Sed vitae accumsan ipsum. Quisque rutrum maximus eros sed cursus. Aliquam lectus enim, ultrices quis tincidunt nec, auctor et dolor. Duis egestas finibus neque id accumsan. Donec ac ultrices tellus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fusce volutpat blandit lacinia. Sed eget lobortis urna, eget sodales lacus. Fusce pretium sem a est fermentum auctor. Nunc tempus sapien ac vestibulum ullamcorper. Nullam commodo porta justo, ut pellentesque libero porttitor non. Sed eros ex, malesuada quis turpis ac, euismod tincidunt mauris. Aenean tempus tortor convallis velit vestibulum, nec vulputate mi accumsan. Quisque in libero ornare, tristique ipsum eget, venenatis est.

In tempus sollicitudin condimentum. Cras eget risus sed dolor egestas condimentum. Vestibulum rutrum, ipsum eget pretium consequat, leo magna condimentum enim, ac auctor elit lorem in arcu. Donec efficitur diam sit amet lacinia sodales. Vivamus auctor dui nec interdum lobortis. In pellentesque quam vitae odio pharetra, eget ultricies diam vehicula. Nulla facilisi. Nulla tincidunt, lectus a laoreet ornare, dui massa malesuada nisl, eu dapibus nisl nibh a neque. Donec rutrum varius augue, ut efficitur nisi. Aenean ac elit eu ligula pharetra elementum a sit amet enim. Vivamus pharetra elementum arcu, et volutpat lectus dictum eu. Ut turpis sem, accumsan quis nisi at, porta eleifend metus. Suspendisse potenti. Aliquam at tortor vitae lorem efficitur aliquam sed a justo. Maecenas volutpat lorem vestibulum auctor posuere. Nam augue lectus, viverra eget libero quis, pretium lacinia arcu.

Nunc eu justo non mi efficitur maximus sed vitae augue. Praesent dolor ligula, imperdiet ut sapien vehicula, scelerisque commodo sem. Praesent at massa nec urna commodo faucibus nec id nisl. Duis vel posuere purus. Morbi eu dolor ultrices, maximus nunc pretium, accumsan nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce nisi lorem, placerat sed arcu eget, gravida finibus nisl. Nunc imperdiet justo id magna luctus accumsan. Vestibulum rutrum est nisl. Fusce a dolor est. Praesent vulputate sollicitudin velit, vitae molestie est condimentum vel. Quisque nec nunc lectus. Curabitur posuere placerat nisl, nec dapibus magna finibus quis.
  </main>
  <footer class="p-4 bg-gray-400">Footer</footer>
</div>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console