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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dolor lectus, gravida id condimentum nec, pretium eu justo. Pellentesque pulvinar, lacus vitae eleifend semper, leo risus consequat nibh, et venenatis lorem mauris id est. Praesent in metus justo, a vulputate risus. Quisque semper ultrices erat vitae vulputate. Vestibulum id dui adipiscing neque interdum pharetra non vel urna. Nam bibendum mi a diam pretium a commodo enim auctor. Fusce tempor tempor risus nec blandit. Suspendisse posuere risus nec metus commodo vitae convallis risus dictum. Pellentesque est mi, congue ut rhoncus vel, accumsan a diam. Sed vulputate cursus fringilla. Nunc justo tortor, tempus quis vulputate id, aliquet suscipit nisl. Cras eu turpis eu metus ultricies accumsan eget vitae lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat enim, fringilla sit amet venenatis sit amet, euismod id lectus. Praesent vitae nisi ante, at rhoncus erat. Sed tempus ullamcorper enim id tincidunt.</p>

  <div id="blurbs">
    <article>
      <h2>Latest News</h2>
      <p>The green frog jumped over the fence, isnt' that neat?</p>
      <i>by someauthor</i>
      <time>Date: June 30, 2012</time>
    </article>
    <article>
      <h2>Twitter Feed</h2>
      <p>Tweet me at blah blah blah
        blah blah
        blaaaaahhhhhh</p>
    </article>
  </div>
  
  <p>Aliquam blandit, metus sed venenatis tincidunt, velit lectus ornare tellus, a posuere erat nunc in odio. Vivamus faucibus ipsum non neque vulputate venenatis. Praesent ornare est sit amet libero convallis dictum. Nunc quis odio est. Nunc at justo metus, at molestie mi. Suspendisse nec nisl nulla. Phasellus eu est mi, dictum dignissim diam. Nam posuere justo at diam laoreet ut tristique tortor consequat. Sed congue diam et lectus laoreet nec rutrum elit feugiat. Sed in ante augue. Praesent rutrum euismod leo posuere faucibus.</p>

</div>
              
            
!

CSS

              
                #content {
  width: 420px;
  border: 1px solid #000;
  padding: 10px 20px;
}

#blurbs {
  overflow: hidden;
}

#blurbs article {
  float: left;
  width: 168px;
  height: 168px;
  border: 1px solid #ccc;
  margin: 0 10px;
  padding: 10px;
  overflow: hidden;
}

#blurbs article h2 {
  margin: 0;
}

#blurbs article i {
  display: block;
}
              
            
!

JS

              
                
              
            
!
999px

Console