JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://foundation.zurb.com/page-templates4/js/vendor/custom.modernizr.js"></script>
<script src="http://foundation.zurb.com/page-templates4/js/foundation.min.js"></script>
<link rel="stylesheet" href="http://foundation.zurb.com/page-templates4/css/normalize.css">
<link rel="stylesheet" href="http://foundation.zurb.com/page-templates4/css/foundation.css">
<header>
<nav class="top-bar">
<div class="row">
<div class="large-12 columns">
<ul class="title-area">
<li class="name">
<h1>
<a href="#">
Top Bar Title
</a>
</h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<ul class="right">
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</section>
</div>
</div>
</nav>
</header>
<div class="row">
<div class="large-12 columns">
<div class="row">
<!-- Content -->
<div class="large-8 columns">
<div class="panel radius">
<div class="row">
<div class="large-6 small-6 columns">
<h4>Header</h4><hr/>
<h5 class="subheader">Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Donec dignissim nibh fermentum odio ornare sagittis.
</h5>
<div class="show-for-small" align="center">
<a href="#" class="small radius button">Call To Action!</a><br>
<a href="#" class="small radius button">Call To Action!</a>
</div>
</div>
<div class="large-6 small-6 columns">
<p>Suspendisse ultrices ornare tempor. Aenean eget ultricies libero. Phasellus non ipsum eros. Vivamus at dignissim massa. Aenean dolor libero, blandit quis interdum et, malesuada nec ligula. Nullam erat...
JavaScript
$(document).foundation();