JSFiddle - React, Tailwind, and code Playground

by Koubenec

HTML

<div id="pattern" class="pattern">
    <div class="col-group">
  		<div>
				<h2>Here's a column of text</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum nisl in risus imperdiet vestibulum.</p>
			</div>
			<div>
				<h2>Here's another column of text</h2>
				<p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
			</div>
		</div>
	</div>
	<!--End Pattern HTML-->
	
	<div class="container">	
		<section class="pattern-description">
			<h1>2 Equal-Width Columns</h1>
			<p>Content that becomes two equal columns when space allows.</p>
		</section>
		<footer role="contentinfo">   
			<div>
				<nav id="menu">
					<a href="http://bradfrost.github.com/this-is-responsive/patterns.html">&larr;More Responsive Patterns</a>
				</nav>
			</div>
		</footer>
	</div>

CSS

/*
colors
red: #e51837; rgb(229,24,55)
gray: #808080;
*/

/************Reset**************/
* { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
}
html, body, div, object, iframe, fieldset { 
	margin: 0; 
	padding: 0; 
	border: 0;
} 
ol, ul { 
	list-style: none;
	margin: 0;
	padding: 0;
} 
table { 
	border-collapse: collapse; 
	border-spacing: 0; 
}
header, footer, nav, section, article, hgroup, figure {
	display: block;	
}
legend {
	display: none;
}
/************End Reset**************/

/************Global**************/
body {
	background: #fff;
	color: #000;
	font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
	padding: 0;
	-webkit-text-size-adjust: none;
}
a {
	color: #808080;
	text-decoration: none;
}
a:hover, a:focus {
	color: #e51837;
}
p {
	margin: 0 0 1em;
}
img, object, video {
	max-width: 100%;
	border: 0;
}
a img {
	border: 0;
	outline: 0;
}
h1 {
	font-size: 3em;
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 0.2em;
}
h2 {
	font-size: 2em;
	line-height: 1.1;
	margin-bottom: 0.2em;
}
h3 {
	font-weight: normal;
	line-height: 1.1;
	padding-bottom: 0.4em;
	border-bottom: 1px solid #ccc;
}
h1 a, h2 a, h3 a {
	display: block;
	color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover {
	color: #e51837;
}
blockquote {
	border-left: 0.5em solid #ddd;
	padding-left: 1em;
	margin-left: 1em;
}
small {
	color: #e51837;
}
input[type=search] {
	-webkit-appearance: none;
	border-radius: 0;
}
::-webkit-input-placeholder {
	color: #808080;
}
:-moz-placeholder {  
    color: #808080;
}
/************End Global**************/

/************Classes**************/
.inactive {
	color: #ddd;
}
/************End Classes**************/

/************Structure**************/
.container {
	max-width: 70em;
	margin: 0 auto;
	padding: 0 1em;
	overflow: hidden;
}
div[role=main] {
	padding-bottom: 1em;
}

/*Footer*/
footer[role=contentinfo] {
	color: #fff;
	background: #000;
	margin: 0 -1em;
	position: relative;
	z-index:...