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 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

              
                <main>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus mauris, vulputate eu imperdiet sed, feugiat ut erat. Nullam convallis risus a purus maximus lobortis sit amet ac nibh. Sed sodales suscipit metus, at porttitor lacus commodo fermentum. Aliquam dapibus nisi eu mattis venenatis. Fusce ac lacus semper, accumsan ligula sit amet, fermentum turpis. In eget sem ornare, congue arcu vitae, accumsan leo. Integer tincidunt tortor quis erat luctus, sed ultrices purus feugiat. Mauris justo nisi, pellentesque pellentesque diam non, sodales blandit ex. Aliquam facilisis ex quis nisl mollis, et finibus purus dictum.
<br /><br />
Vestibulum lacinia dapibus arcu ut molestie. Sed quis pellentesque dui, a blandit massa. Mauris nec tempor libero. Donec venenatis neque nulla, ac egestas turpis interdum eget. Pellentesque hendrerit est id facilisis posuere. Duis ac nunc quis tortor condimentum placerat. Sed pretium porta imperdiet. Proin auctor eget lorem et pretium. Donec ut mauris vel massa congue malesuada quis a velit.
<br /><br />
Donec justo ipsum, cursus vitae ultricies eu, volutpat nec nisi. Aliquam at enim sit amet nibh placerat dictum. Morbi mollis porttitor felis. Proin eget diam tincidunt, varius ante quis, ultricies sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce magna turpis, pharetra nec lectus id, tincidunt congue augue. Integer condimentum, orci mollis dictum feugiat, sem justo dictum est, sit amet auctor mauris diam et nunc. Nulla dapibus erat dui, a porta neque consequat quis. Curabitur vel leo lectus. In volutpat nec dolor ut tempor. Nunc sollicitudin, metus vitae ultricies cursus, justo lectus gravida neque, in egestas lectus urna in massa. Donec suscipit, lorem sed ultrices vehicula, magna dolor vestibulum mi, ac euismod lectus felis vel dolor.
<br /><br />
Nulla dui nulla, tempor vel lobortis nec, consequat quis elit. Nam hendrerit metus rhoncus, mollis libero eget, vehicula lacus. Fusce egestas orci magna, vitae gravida odio laoreet vel. Fusce consequat sed nunc vitae gravida. Vivamus at nunc aliquet, commodo dui vitae, bibendum velit. Suspendisse potenti. Proin eleifend magna id est semper varius. Fusce sed neque eu massa laoreet luctus quis a eros. Curabitur eleifend nisl a tellus rutrum, a viverra erat tempus. Integer commodo convallis purus, ut fringilla orci auctor sed. Vestibulum lacinia bibendum risus sed sollicitudin.
<br /><br />
Curabitur vestibulum augue mauris, at rhoncus enim vestibulum egestas. Pellentesque tristique felis lectus, sit amet auctor quam gravida quis. Donec laoreet purus id cursus pulvinar. Vivamus ornare fermentum ipsum sed aliquam. Vivamus volutpat sodales eros nec iaculis. Suspendisse potenti. Vestibulum pharetra varius justo, nec maximus mauris fringilla sed. In consequat mollis sem a tempor. Cras et bibendum dui. Morbi fermentum arcu erat, et elementum ex rutrum eget. Donec volutpat, tellus nec faucibus suscipit, nisi erat blandit eros, finibus finibus nibh elit sit amet leo. Nunc ut elit velit. Nullam laoreet, leo a porttitor sollicitudin, est velit vestibulum nisl, id lobortis elit magna in nunc.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus mauris, vulputate eu imperdiet sed, feugiat ut erat. Nullam convallis risus a purus maximus lobortis sit amet ac nibh. Sed sodales suscipit metus, at porttitor lacus commodo fermentum. Aliquam dapibus nisi eu mattis venenatis. Fusce ac lacus semper, accumsan ligula sit amet, fermentum turpis. In eget sem ornare, congue arcu vitae, accumsan leo. Integer tincidunt tortor quis erat luctus, sed ultrices purus feugiat. Mauris justo nisi, pellentesque pellentesque diam non, sodales blandit ex. Aliquam facilisis ex quis nisl mollis, et finibus purus dictum.
<br /><br />
Vestibulum lacinia dapibus arcu ut molestie. Sed quis pellentesque dui, a blandit massa. Mauris nec tempor libero. Donec venenatis neque nulla, ac egestas turpis interdum eget. Pellentesque hendrerit est id facilisis posuere. Duis ac nunc quis tortor condimentum placerat. Sed pretium porta imperdiet. Proin auctor eget lorem et pretium. Donec ut mauris vel massa congue malesuada quis a velit.
<br /><br />
Donec justo ipsum, cursus vitae ultricies eu, volutpat nec nisi. Aliquam at enim sit amet nibh placerat dictum. Morbi mollis porttitor felis. Proin eget diam tincidunt, varius ante quis, ultricies sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce magna turpis, pharetra nec lectus id, tincidunt congue augue. Integer condimentum, orci mollis dictum feugiat, sem justo dictum est, sit amet auctor mauris diam et nunc. Nulla dapibus erat dui, a porta neque consequat quis. Curabitur vel leo lectus. In volutpat nec dolor ut tempor. Nunc sollicitudin, metus vitae ultricies cursus, justo lectus gravida neque, in egestas lectus urna in massa. Donec suscipit, lorem sed ultrices vehicula, magna dolor vestibulum mi, ac euismod lectus felis vel dolor.
<br /><br />
Nulla dui nulla, tempor vel lobortis nec, consequat quis elit. Nam hendrerit metus rhoncus, mollis libero eget, vehicula lacus. Fusce egestas orci magna, vitae gravida odio laoreet vel. Fusce consequat sed nunc vitae gravida. Vivamus at nunc aliquet, commodo dui vitae, bibendum velit. Suspendisse potenti. Proin eleifend magna id est semper varius. Fusce sed neque eu massa laoreet luctus quis a eros. Curabitur eleifend nisl a tellus rutrum, a viverra erat tempus. Integer commodo convallis purus, ut fringilla orci auctor sed. Vestibulum lacinia bibendum risus sed sollicitudin.
<br /><br />
Curabitur vestibulum augue mauris, at rhoncus enim vestibulum egestas. Pellentesque tristique felis lectus, sit amet auctor quam gravida quis. Donec laoreet purus id cursus pulvinar. Vivamus ornare fermentum ipsum sed aliquam. Vivamus volutpat sodales eros nec iaculis. Suspendisse potenti. Vestibulum pharetra varius justo, nec maximus mauris fringilla sed. In consequat mollis sem a tempor. Cras et bibendum dui. Morbi fermentum arcu erat, et elementum ex rutrum eget. Donec volutpat, tellus nec faucibus suscipit, nisi erat blandit eros, finibus finibus nibh elit sit amet leo. Nunc ut elit velit. Nullam laoreet, leo a porttitor sollicitudin, est velit vestibulum nisl, id lobortis elit magna in nunc.</p>
</main>
<div class="modal">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus mauris, vulputate eu imperdiet sed, feugiat ut erat. Nullam convallis risus a purus maximus lobortis sit amet ac nibh. Sed sodales suscipit metus, at porttitor lacus commodo fermentum. Aliquam dapibus nisi eu mattis venenatis. Fusce ac lacus semper, accumsan ligula sit amet, fermentum turpis. In eget sem ornare, congue arcu vitae, accumsan leo. Integer tincidunt tortor quis erat luctus, sed ultrices purus feugiat. Mauris justo nisi, pellentesque pellentesque diam non, sodales blandit ex. Aliquam facilisis ex quis nisl mollis, et finibus purus dictum.
<br /><br />
Vestibulum lacinia dapibus arcu ut molestie. Sed quis pellentesque dui, a blandit massa. Mauris nec tempor libero. Donec venenatis neque nulla, ac egestas turpis interdum eget. Pellentesque hendrerit est id facilisis posuere. Duis ac nunc quis tortor condimentum placerat. Sed pretium porta imperdiet. Proin auctor eget lorem et pretium. Donec ut mauris vel massa congue malesuada quis a velit.</p>
</div>
              
            
!

CSS

              
                body {
  font-family: Roboto,"Helvetica Neue",Arial,sans-serif;
}
main {
  max-width: 65ch;
  margin: 0 auto;
}
.modal {
  overscroll-behavior-y: contain;
  overflow-y: scroll;
  width: 200px;
  height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
  border: 1px solid #333;
  padding: 0.5rem;
}
              
            
!

JS

              
                
              
            
!
999px

Console