JSFiddle - React, Tailwind, and code Playground

by Peter Aad

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/js/foundation/foundation.tooltip.min.js"></script>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">Mysite</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

<section class="top-bar-section">
<ul class="right">
<li class="has-form">
<div class="row collapse">
<div class="large-8 small-9 columns">
<input type="text" placeholder="Search">
</div>
<div class="large-4 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</div>
</li>    
</ul>

<ul class="right">
<li class="divider"></li>
<li><a href="#">Ex1</a></li>
<li class="divider"></li>
<li><a href="#">Ex2</a></li>
<li class="divider"></li>
</ul>
</section>

JavaScript

$(document).foundation();