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">
  <div class="h-screen w-1/5 bg-gray-900">
    <p class="px-4 py-8 text-white text-xl">Sidebar</p>
  </div>
  <div class="h-screen flex-1 overflow-auto">
    <div class="sticky top-0 py-3 text-center text-white bg-blue-600">
      Hi there, welcome to our site! Make sure to accept our new <a href="#" class="underline">terms of services</a>.
    </div>

<div class="py-8 mx-auto" style="width: 500px">
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet orci auctor ante aliquam, vitae porta neque viverra. Integer at nunc lacinia enim volutpat fringilla. Nam non risus in urna varius cursus. Aenean vel magna ultrices, laoreet felis sit amet, efficitur massa. Quisque nulla orci, iaculis eu quam vitae, mattis pharetra eros. Sed feugiat mi ac iaculis interdum. Ut non arcu laoreet, venenatis ex sed, venenatis enim. Vestibulum gravida volutpat urna ac congue. In odio lacus, malesuada eget tincidunt at, dignissim nec lectus. In id sem in sem pretium rhoncus non ut enim. In ullamcorper orci eu nibh vehicula, a mollis velit varius. Vestibulum eget suscipit odio, ac aliquam urna. Curabitur ut lectus aliquam, vulputate nunc at, laoreet tellus. Donec condimentum mollis enim, ac ultricies odio dignissim ut. Nullam ut libero ut diam euismod sollicitudin.</p>

<p class="mb-4">Praesent nec rhoncus sapien. Nulla viverra tortor vel interdum tincidunt. Vivamus aliquam in massa eu vulputate. Mauris cursus faucibus augue. Nulla iaculis erat eget ornare elementum. Etiam fermentum diam non metus luctus, vitae iaculis sapien scelerisque. Donec consequat at eros non auctor.</p>

<p class="mb-4">Curabitur libero massa, volutpat quis imperdiet et, convallis egestas ligula. Curabitur risus odio, ullamcorper hendrerit sem ut, congue tempor tellus. Aenean metus tellus, bibendum a imperdiet dapibus, gravida vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque purus enim, dictum eget vulputate eget, sodales et odio. Integer in ipsum eu eros tempus eleifend a in justo. Phasellus congue quam eu libero cursus, et facilisis erat auctor. Cras risus nunc, rhoncus vel rhoncus ut, sodales vitae justo. Nunc sodales odio eu justo cursus feugiat. In a orci id tellus luctus dignissim. Vivamus vestibulum et nisl id porttitor. Fusce pellentesque consectetur massa sit amet semper. Nulla rhoncus ipsum nulla, sit amet efficitur leo pulvinar vitae.</p>

<p class="mb-4">In ultricies enim nec turpis pretium, eget malesuada enim dapibus. Maecenas cursus dolor enim, sit amet molestie erat porttitor in. In aliquam turpis at porta aliquam. In sed tellus in ante efficitur ornare eu sit amet ex. Vestibulum id ex eu lectus venenatis dapibus sit amet ut diam. Nulla cursus eu lectus vel ultrices. Cras iaculis metus non lacus imperdiet imperdiet id ac purus. Pellentesque interdum felis at quam tincidunt, quis porttitor justo ornare. Sed efficitur sapien nec orci viverra, pulvinar sagittis nisi ultrices.</p>

<p class="mb-4">Integer tempus massa quis eros egestas sagittis. In hac habitasse platea dictumst. Praesent eu fringilla metus. Donec condimentum euismod eros in volutpat. Ut ultricies nulla at elit aliquam, nec ornare ex lobortis. Donec tincidunt fringilla justo, vitae cursus velit mattis ut. In fermentum blandit luctus. Vestibulum imperdiet nulla vitae libero sagittis posuere. Sed ac hendrerit leo, et vulputate dolor. Maecenas a sodales est, id fringilla ante. Sed tincidunt elit risus, nec consectetur justo mattis quis. Ut laoreet elit enim, sit amet consectetur justo bibendum non. Curabitur venenatis, augue id fringilla porta, dui mauris sagittis enim, pulvinar facilisis lectus justo at magna. Vivamus sollicitudin tellus laoreet tortor bibendum, blandit finibus dui aliquam.</p>
  <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet orci auctor ante aliquam, vitae porta neque viverra. Integer at nunc lacinia enim volutpat fringilla. Nam non risus in urna varius cursus. Aenean vel magna ultrices, laoreet felis sit amet, efficitur massa. Quisque nulla orci, iaculis eu quam vitae, mattis pharetra eros. Sed feugiat mi ac iaculis interdum. Ut non arcu laoreet, venenatis ex sed, venenatis enim. Vestibulum gravida volutpat urna ac congue. In odio lacus, malesuada eget tincidunt at, dignissim nec lectus. In id sem in sem pretium rhoncus non ut enim. In ullamcorper orci eu nibh vehicula, a mollis velit varius. Vestibulum eget suscipit odio, ac aliquam urna. Curabitur ut lectus aliquam, vulputate nunc at, laoreet tellus. Donec condimentum mollis enim, ac ultricies odio dignissim ut. Nullam ut libero ut diam euismod sollicitudin.</p>

<p class="mb-4">Praesent nec rhoncus sapien. Nulla viverra tortor vel interdum tincidunt. Vivamus aliquam in massa eu vulputate. Mauris cursus faucibus augue. Nulla iaculis erat eget ornare elementum. Etiam fermentum diam non metus luctus, vitae iaculis sapien scelerisque. Donec consequat at eros non auctor.</p>

<p class="mb-4">Curabitur libero massa, volutpat quis imperdiet et, convallis egestas ligula. Curabitur risus odio, ullamcorper hendrerit sem ut, congue tempor tellus. Aenean metus tellus, bibendum a imperdiet dapibus, gravida vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque purus enim, dictum eget vulputate eget, sodales et odio. Integer in ipsum eu eros tempus eleifend a in justo. Phasellus congue quam eu libero cursus, et facilisis erat auctor. Cras risus nunc, rhoncus vel rhoncus ut, sodales vitae justo. Nunc sodales odio eu justo cursus feugiat. In a orci id tellus luctus dignissim. Vivamus vestibulum et nisl id porttitor. Fusce pellentesque consectetur massa sit amet semper. Nulla rhoncus ipsum nulla, sit amet efficitur leo pulvinar vitae.</p>

<p class="mb-4">In ultricies enim nec turpis pretium, eget malesuada enim dapibus. Maecenas cursus dolor enim, sit amet molestie erat porttitor in. In aliquam turpis at porta aliquam. In sed tellus in ante efficitur ornare eu sit amet ex. Vestibulum id ex eu lectus venenatis dapibus sit amet ut diam. Nulla cursus eu lectus vel ultrices. Cras iaculis metus non lacus imperdiet imperdiet id ac purus. Pellentesque interdum felis at quam tincidunt, quis porttitor justo ornare. Sed efficitur sapien nec orci viverra, pulvinar sagittis nisi ultrices.</p>
</div>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console