JSFiddle - React, Tailwind, and code Playground
by khamer
HTML
<link rel="stylesheet" href="http://imarc.github.io/boilerplate/css/styles.css">
<!--
This is the Emmet shorthand...
(header.primary>(.container>(h1>lorem2)+(nav.utility>ul>li*3>a>lorem1))+nav.primary>ul.container>li*4>(a>lorem2))+(.torso.container>(aside.primary>section>nav.supplemental>ul>li*4>(a>lorem2)+ul>li*3>a>lorem2)+(.main[role=main]>(h1>lorem5)+(section.intro>p>lorem)+section*3>(h2>lorem5)+p*3>lorem))+(footer.primary>.container>.copyright{©2014 iMarc LLC.})
That generates all of the below.
-->
<header class="primary">
<div class="container">
<h1>Lorem ipsum.</h1>
<nav class="utility">
<ul>
<li><a href="">Lorem.</a></li>
<li><a href="">Quod.</a></li>
<li><a href="">Excepturi.</a></li>
</ul>
</nav>
</div>
<nav class="primary">
<ul class="container">
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">At sapiente?</a></li>
<li><a href="">Excepturi fugit.</a></li>
<li><a href="">Ad perferendis.</a></li>
</ul>
</nav>
</header>
<div class="torso container">
<aside class="primary">
<section>
<nav class="supplemental">
<ul>
<li>
<a href="">Lorem ipsum.</a>
<ul>
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Cum odit.</a></li>
<li><a href="">Temporibus error!</a></li>
</ul>
</li>
<li>
<a href="">Corporis suscipit?</a>
<ul>
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Omnis nam.</a></li>
<li><a href="">Molestiae sed!</a></li>
</ul>
</li>
...