JSFiddle - React, Tailwind, and code Playground

by Terry Bone

HTML

<body>
	<header id="top-head">
		<div class="container cf">
			<div class="left" id="left-head">
				<div class="left">
					<a href="#" class="gigantic">My Blog</a>
					<p>Just another <b><a href="#">blog</a></b></p>
				</div>
				<div class="right">
					<nav class="nav-nav">
						<ul class="nav-ul">
							<li><a href="#">Home</a></li>
							<li><a href="#">Portfolio</a></li>
							<li><a href="#">Contact</a></li>
							<li><a href="#">About</a></li>
						</ul>
					</nav>
				</div>
			</div>
			<div class="right" id="right-head">
				<form action="?" method="get">
					<label for="search">Search on this website</label>
					<input type="search" id="search">
					<input type="submit" value="Search">
				</form>
			</div>
		</div>
	</header>
	<div class="container">
		<aside id="categories">
			<ul>
				<li><a href="#">Category 1</a></li>
				<li><a href="#">Category 2</a></li>
				<li><a href="#">Category 3</a></li>
			</ul>
		</aside>
		<section id="blog-post">
			<article>
				<header>
					<h1 class="h1">Far far away</h1>
					<p class="small italic">Published <time datetime="2013-12-26 pubdate">December 26, 2013</time> bydummytext</p>
				</header>
				<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, therelive the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, alarge language ocean.</p>
				<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. Itis a paradisematic country, in which roasted parts of sentences fly into your mouth.
				</p>
				<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographiclife One day however a small line of blind text by the name of Lorem Ipsum decided to leave for thefar World of Grammar.</p>
				<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild QuestionMarks and devious Semikoli, but the Little Blind Text...

CSS

/*
YUI 3.14.1 (build 63049cb)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

/*!
Pure v0.3.0
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yui/pure/blob/master/LICENSE.md
*//*!
normalize.css v1.1.2 | MIT License | git.io/normalize
Copyright (c) Nicolas Gallagher and Jonathan Neal
*//*! normalize.css v1.1.2 | MIT License | git.io/normalize */

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em...