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 class="wrap">
	<p>LISTEN! We are beginning our story! When we arrive at the end of it we shall, it is to be hoped, know more than we do now. There was once a magician! a wicked magician!! a most wicked magician!!! Great was his delight at having constructed a mirror possessing this peculiarity, viz:—that everything good and beautiful, when reflected in it, shrank up almost to nothing, whilst those <img class="right" src="https://place-hold.it/400x150/22aaad">things that were ugly and useless were magnified, and made to appear ten times worse than before. The loveliest landscapes reflected in this mirror looked like boiled spinach; and the handsomest persons appeared odious, or as if standing upon their heads, their features being so distorted that their friends could never have recognised them. Moreover, if one of them had a freckle, he might be sure that it would seem to spread over the nose and mouth; and if a good or pious thought <img class="left" src="https://place-hold.it/300x200/bbaadd"> glanced across his mind, a wrinkle was seen in the mirror. All this the magician thought highly entertaining, and he chuckled with delight at his own clever invention. Those who frequented the school of magic where he taught spread abroad the fame of this wonderful mirror, and declared that by its means the world and its inhabitants might be seen now for the{71} first time as they really were. They carried the mirror from place to place, till at last there was no country nor person that had not been misrepresented in it. Its admirers now must needs fly up to the sky with it, to see if they could carry on their sport even there. But the higher they flew the more wrinkled did the mirror become; they could scarcely hold it together. They flew on and on, higher and higher, till at last the mirror trembled so fearfully that it escaped
</div>
              
            
!

CSS

              
                .wrap{
	max-width: 600px;
	margin: 0 auto;
}

.left {
	float: left;
	margin: 1rem 1rem 1rem 0;
	max-width: 100%;
}

.right {
	float: right;
	margin: 1rem 0 1rem 1rem;
	max-width: 100%;
}
              
            
!

JS

              
                
              
            
!
999px

Console