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="row">
  <div class="large-12 columns">
    <h4>Check out some blogs I follow</h4>
    <ul class="tabs" data-tab role="tablist">
      <li class="tab-title active" role="presentation">
        <a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" aria-controls="panel2-1">WPMU Dev</a>
      </li>
      <li class="tab-title" role="presentation">
        <a href="#panel2-2" role="tab" tabindex="0" aria-selected="false" aria-controls="panel2-2">SitePoint</a>
      </li>
      <li class="tab-title" role="presentation">
        <a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" aria-controls="panel2-3">Tuts+ Code</a>
      </li>
    </ul>
    <div class="tabs-content">
      <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
        <div id="read-feed-wpmu">
          <ul class="masonry-container small-block-grid-4">
            <li class="masonry-item">
              <a href="http://premium.wpmudev.org/blog/wordpress-travel-blog/"><img class="attachment-490x490" src="https://premium.wpmudev.org/blog/wp-content/uploads/2015/09/wordpress-com1.jpg" alt="WordPress.com offers free web hosting." width="490" height="312"></a>
              <div class="panel"><small>September 15th, 2015<br>by Daniel Pataki</small>
                <dl><dt><a href="http://premium.wpmudev.org/blog/wordpress-travel-blog/">Creating the Perfect Custom Travel Blog with WordPress</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://premium.wpmudev.org/blog/free-quality-backup-plugins/"><img width="735" height="239" src="http://premium.wpmudev.org/blog/wp-content/uploads/2015/08/updraft1.png" class="attachment-ratio-full" alt="updraft"></a>
              <div class="panel"><small>September 14th, 2015<br>by Tom Ewer</small>
                <dl><dt><a href="http://premium.wpmudev.org/blog/free-quality-backup-plugins/">11 Best Free Quality Backup Plugins for Protecting Your WordPress Site</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://premium.wpmudev.org/blog/wordpress-media-library-hidden-features/"><img class="attachment-1364x1364" src="https://premium.wpmudev.org/blog/wp-content/uploads/2015/08/wordpress-media-library.png" alt="The WordPress Media Library." width="1364" height="515"></a>
              <div class="panel"><small>September 13th, 2015<br>by Tom Ewer</small>
                <dl><dt><a href="http://premium.wpmudev.org/blog/wordpress-media-library-hidden-features/">9 Hidden Features in the WordPress Media Library Only Power Users Know</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://premium.wpmudev.org/blog/google-maps-shortcode/"><img class="size-full wp-image-145354" src="https://premium.wpmudev.org/blog/wp-content/uploads/2015/08/Screen-Shot-2015-08-27-at-09.13.52.png" alt="Map Shortcode Example" width="735" height="861"></a>
              <div class="panel"><small>September 12th, 2015<br>by Daniel Pataki</small>
                <dl><dt><a href="http://premium.wpmudev.org/blog/google-maps-shortcode/">Adding Google Maps to WordPress with Your Own Quick Shortcode</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://premium.wpmudev.org/blog/responsive-wordpress-design/"><img class="attachment-490x490" src="https://premium.wpmudev.org/blog/wp-content/uploads/2015/09/responsive-design.png" alt="&quot;Responsive design is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience –&nbsp;easy reading and navigation with a minimum of resizing, panning, and scrolling –&nbsp;across a wide range of devices.&quot; - Wikipedia."
                width="490" height="312"></a>
              <div class="panel"><small>September 11th, 2015<br>by Rachel McCollin</small>
                <dl><dt><a href="http://premium.wpmudev.org/blog/responsive-wordpress-design/">Creating a Responsive WordPress Site Your Mobile Users Will Love</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://premium.wpmudev.org/blog/reasons-wordpress-developers-paid-peanuts/"><img class="attachment-735x735" src="https://premium.wpmudev.org/blog/wp-content/uploads/2015/09/wpengine-freelancer-rates.png" alt="Resrach on freelance jobs rates of pay for WPEngine" width="735" height="442"></a>
              <div class="panel"><small>September 10th, 2015<br>by Rachel McCollin</small>
                <dl><dt><a href="http://premium.wpmudev.org/blog/reasons-wordpress-developers-paid-peanuts/">The 7 Reasons Why WordPress Developers Are Paid Peanuts</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://premium.wpmudev.org/blog/wordpress-popup/"><img class="attachment-735x735" src="https://premium.wpmudev.org/blog/wp-content/uploads/2015/09/wordpress-pop-up-plugins.png" alt="WPMU DEV's WordPress PopUp on WordPress.org." width="735" height="239"></a>
              <div class="panel"><small>September 9th, 2015<br>by Tom Ewer</small>
                <dl><dt><a href="http://premium.wpmudev.org/blog/wordpress-popup/">How to Create Awesome Pop-ups with the Free WordPress PopUp Plugin</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://premium.wpmudev.org/blog/managing-multiple-wordpress-sites/"><img width="735" height="393" src="http://premium.wpmudev.org/blog/wp-content/uploads/2015/08/managewp.png" class="attachment-ratio-full" alt="ManageWP: The ultimate WordPress dashboard"></a>
              <div class="panel"><small>September 8th, 2015<br>by Tom Ewer</small>
                <dl><dt><a href="http://premium.wpmudev.org/blog/managing-multiple-wordpress-sites/">Managing Multiple WordPress Sites: The Ultimate Guide</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
        <div id="read-feed-sitepoint">
          <ul class="masonry-container small-block-grid-4">
            <li class="masonry-item">
              <a href="http://www.sitepoint.com/guide-to-npm-as-a-build-tool/"></a>
              <div class="panel"><small>September 15th, 2015<br>by Peter Dierx</small>
                <dl><dt><a href="http://www.sitepoint.com/guide-to-npm-as-a-build-tool/">Give Grunt the Boot! A Guide to Using npm as a Build Tool</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://www.sitepoint.com/how-to-make-an-effective-iot-dashboard-without-coding/"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/09/1442042496blynksketch_bb-726x1024.png" alt="Sketch of Particle and Blynk setup" width="726" height="1024" class="aligncenter size-large wp-image-114826"></a>
              <div class="panel"><small>September 15th, 2015<br>by Patrick Catanzariti</small>
                <dl><dt><a href="http://www.sitepoint.com/how-to-make-an-effective-iot-dashboard-without-coding/">How to Make an Effective IoT Dashboard without Coding</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://www.sitepoint.com/watch-creating-high-resolution-background-images-with-css/"></a>
              <div class="panel"><small>September 15th, 2015<br>by Russ Weakley</small>
                <dl><dt><a href="http://www.sitepoint.com/watch-creating-high-resolution-background-images-with-css/">Watch: Creating High Resolution Background Images with CSS</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://www.sitepoint.com/how-to-pitch-freelance-services-to-small-businesses/"></a>
              <div class="panel"><small>September 15th, 2015<br>by Joshua Kraus</small>
                <dl><dt><a href="http://www.sitepoint.com/how-to-pitch-freelance-services-to-small-businesses/">How to Pitch Freelance Services to Small Businesses</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://www.sitepoint.com/drupal-8-third-party-settings-and-pseudo-fields/"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/11/1416938561drupal8wide-1024x332.png" alt="Drupal 8 logo" title=""></a>
              <div class="panel"><small>September 15th, 2015<br>by Daniel Sipos</small>
                <dl><dt><a href="http://www.sitepoint.com/drupal-8-third-party-settings-and-pseudo-fields/">Drupal 8 Third Party Settings and Pseudo-Fields</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://www.sitepoint.com/create-easy-interactions-using-sketch-app-atomic-io/"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/09/1441951073sketch-atomic-1.jpg" alt="SKETCH APP INTERACTIONS IN ATOMIC.IO" width="660" height="425" class="aligncenter size-full wp-image-114753"></a>
              <div class="panel"><small>September 15th, 2015<br>by Daniel Schwarz</small>
                <dl><dt><a href="http://www.sitepoint.com/create-easy-interactions-using-sketch-app-atomic-io/">Create Elegant (but Easy) Interactions Using Sketch &amp; Atomic.io</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://www.sitepoint.com/ruby-on-medicine-counting-word-frequency-in-a-file/"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/01/1420894467Fotolia_71570941_Subscription_Monthly_M-300x300.jpg" width="300" height="300" class="alignleft"></a>
              <div class="panel"><small>September 14th, 2015<br>by A. Hasan</small>
                <dl><dt><a href="http://www.sitepoint.com/ruby-on-medicine-counting-word-frequency-in-a-file/">Ruby on Medicine: Counting Word Frequency in a File</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="http://www.sitepoint.com/meet-igaro-app-webs-finest-spa-framework/"></a>
              <div class="panel"><small>September 12th, 2015<br>by Andrew Charnley</small>
                <dl><dt><a href="http://www.sitepoint.com/meet-igaro-app-webs-finest-spa-framework/">Meet Igaro App — Potentially the Web’s Finest SPA Framework</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
        <div id="read-feed-tuts">
          <ul class="masonry-container small-block-grid-4">
            <li class="masonry-item">
              <a href="https://code.tutsplus.com/tutorials/getting-started-with-healthkit-part-1--cms-24477"><img alt="Creating new project - Selecting template" src="https://cms-assets.tutsplus.com/uploads/users/482/posts/24477/image/First.png"></a>
              <div class="panel"><small>September 15th, 2015<br>by Lukas Petr</small>
                <dl><dt><a href="https://code.tutsplus.com/tutorials/getting-started-with-healthkit-part-1--cms-24477">Getting Started With HealthKit: Part 1</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="https://code.tutsplus.com/tutorials/creating-backdrops-and-sprites-in-scratch--cms-24121"><img src="https://cms-assets.tutsplus.com/uploads/users/227/posts/24121/final_image/finished-product.jpg" alt="Final product image"></a>
              <div class="panel"><small>September 14th, 2015<br>by Rachel McCollin</small>
                <dl><dt><a href="https://code.tutsplus.com/tutorials/creating-backdrops-and-sprites-in-scratch--cms-24121">Creating Backdrops and Sprites in Scratch</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="https://code.tutsplus.com/tutorials/mastering-wp_query-actions-and-filters--cms-23112"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/23112/sc/4/mf.gif" width="1"></a>
              <div class="panel"><small>September 14th, 2015<br>by Barış Ünver</small>
                <dl><dt><a href="https://code.tutsplus.com/tutorials/mastering-wp_query-actions-and-filters--cms-23112">Mastering WP_Query: Actions and Filters</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="https://code.tutsplus.com/articles/better-cross-platform-development-highlights-from-the-microsoft-tutorial-series--cms-24807"><img alt="Testing Internet Explorer on iOS Mac OS X and Android" src="https://cms-assets.tutsplus.com/uploads/users/48/posts/24807/image/ieonosx-17.jpg"></a>
              <div class="panel"><small>September 14th, 2015<br>by Andrew Blackman</small>
                <dl><dt><a href="https://code.tutsplus.com/articles/better-cross-platform-development-highlights-from-the-microsoft-tutorial-series--cms-24807">Better Cross-Platform Development: Highlights From the Microsoft Tutorial Series</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="https://code.tutsplus.com/articles/the-beginners-guide-to-woocommerce-adding-coupons-usage-restriction-part-1--cms-22795"><img alt="Exclude sale items checkbox" src="https://cms-assets.tutsplus.com/uploads/users/164/posts/22795/image/1.jpg"></a>
              <div class="panel"><small>September 13th, 2015<br>by Ahmad Awais</small>
                <dl><dt><a href="https://code.tutsplus.com/articles/the-beginners-guide-to-woocommerce-adding-coupons-usage-restriction-part-1--cms-22795">The Beginners Guide to WooCommerce: Adding Coupons—Usage Restriction Part 1  </a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="https://code.tutsplus.com/tutorials/out-of-the-box-wordpress-the-groundbreaking-way-to-activate-plugins-themes-upon-wordpress-installation--cms-23551"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/23551/sc/4/mf.gif" width="1"></a>
              <div class="panel"><small>September 12th, 2015<br>by Barış Ünver</small>
                <dl><dt><a href="https://code.tutsplus.com/tutorials/out-of-the-box-wordpress-the-groundbreaking-way-to-activate-plugins-themes-upon-wordpress-installation--cms-23551">Out-of-the-Box WordPress: The Groundbreaking Way to Activate Plugins &amp; Themes Upon WordPress Installation</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="https://code.tutsplus.com/tutorials/design-tips-for-material-design--cms-22515"><img alt="An Example of a Card Design" src="https://cms-assets.tutsplus.com/uploads/users/52/posts/22515/image/card_design.png"></a>
              <div class="panel"><small>September 12th, 2015<br>by Sven Lenaerts</small>
                <dl><dt><a href="https://code.tutsplus.com/tutorials/design-tips-for-material-design--cms-22515">Design Tips for Material Design</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
            <li class="masonry-item">
              <a href="https://code.tutsplus.com/tutorials/simplify-android-development-using-manifoldjs-with-crosswalk--cms-24790"><img alt="manifoldJS" src="https://cms-assets.tutsplus.com/uploads/users/48/posts/24790/image/manifold.jpg"></a>
              <div class="panel"><small>September 12th, 2015<br>by Jeff Burtoft</small>
                <dl><dt><a href="https://code.tutsplus.com/tutorials/simplify-android-development-using-manifoldjs-with-crosswalk--cms-24790">Simplify Android Development Using manifoldJS With Crosswalk</a></dt>
                  <dd></dd>
                </dl>
              </div>
            </li>
          </ul>
        </div>
      </section>
    </div>
  </div>
</div>
              
            
!

CSS

              
                h4 {
  margin: 2rem 0;
}
.panel {
  border: none;
}
.tabs {
	margin-bottom: 2rem !important;
}
.tab-title.active {
	border: 1px solid silver;
	border-bottom: none;
}
.tab-title a {
	font-size: 0.8rem !important;
	padding: 0.75rem 2rem !important;
}
              
            
!

JS

              
                // Initialize Foundation
$(document).foundation();

// Initialize Masonry inside Foundation 5.5 Tab component
$(window).load(function() {
  $('.masonry-container').masonry({
    itemSelector: '.masonry-item'
  });
});

// Reinitialize masonry inside each panel after the relative tab link is clicked - 
$('.tab-title a').on('click', function() {
	// do async to allow menu to open
	setTimeout( function() {
		$('.masonry-container').masonry({
			itemSelector: '.masonry-item'
		}, 500);
	});
});
              
            
!
999px

Console