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

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

CSS

              
                p:first-letter {
  color: rgb(70, 70, 70);
  float: left;
  font-family: Georgia, serif;
  font-size: 3.5em;
  font-weight: bold;
  margin: 0 0.2em 0 0;
  line-height: 0.75;
  text-transform: lowercase;
}

              
            
!

JS

              
                
              
            
!
999px

Console