zurb-foundation-5/doc/includes/getting_started/gs_plugins_example.html

Foundation 5 for npm (no code modification from original repo)

<section class="gs-modal">
  <a href="#" data-reveal-id="firstModal" class="radius button">Click me to Reveal a Modal</a>
  <div id="firstModal" class="reveal-modal" data-reveal>
    <h2>This is a modal.</h2>
    <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
    <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
    <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
    <a class="close-reveal-modal">&#215;</a>
  </div>
  <div id="secondModal" class="reveal-modal" data-reveal>
    <h2>This is a second modal.</h2>
    <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
    <a class="close-reveal-modal">&#215;</a>
  </div>
</section>
<form data-abide>
  <div class="name-field">
    <label>Today's date&nbsp; <small>required</small>
      <input type="text" placeholder="Type in text to this form to test the validation" pattern="month_day_year">
    </label>
    <small class="error">If you didn't put in a date in the format 'mm/dd/yyyy,'' this error should appear.</small>
  </div>
</form>
<section class="tabs-example">
  <ul class="tabs" data-tab>
    <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
    <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
    <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
  </ul>
  <div class="tabs-content">
    <div class="content active" id="panel2-1">
      <p>First panel content goes here...</p>
    </div>
    <div class="content" id="panel2-2">
      <p>Second panel content goes here...</p>
    </div>
    <div class="content" id="panel2-3">
      <p>Third panel content goes here...</p>
    </div>
  </div>
</section>
<div data-alert class="alert-box warning round">
  This is a round warning alert.
  <a href="#" class="close">&times;</a>
</div>