JSFiddle - React, Tailwind, and code Playground

by kent93

HTML

<!doctype html>
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Dynamic Grids</title>
		<!--[if lte IE 7]><style>.support-note .note-ie{display:block;}</style><![endif]-->
	</head>
	<body>
		<div class="container">

			<!-- Codrops top bar -->
			<div class="codrops-top cf">
				<span class="right">
					<a href="http://lorempixel.com/">Images by lorempixel.com</a>
				</span>
			</div><!--/ Codrops top bar -->

			<header class="cf">

				<div class="support-note">
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>

			</header>

			<div class="main">

			<div class="resize"><small><strong>resize me!</strong></small></div>

				<div class="row cf">
					<div class="mb-gamma col span_12_vpalpha span_3_vpgamma span_3_ie8">
						<div class="row cf">
							<div class="col span_3_vpalpha span_12_vpgamma span_12_ie8">
								<img class="mb-alpha" src="http://lorempixel.com/300/300/people/7">
							</div>
							<div class="col span_9_vpalpha span_7_vpbeta span_12_vpgamma col-12-ie8">
								<h1>Pikaboo!</h1>
							</div>
							<div class="col span_9_vpalpha span_2_vpbeta span_12_vpgamma col-12-ie8">
								<small class="d-iblock mb-alpha"><sub>4 Jan, 2052</sub></small>
							</div>
							<div class="col span_12_vpalpha span_9_vpbeta span_12_vpgamma col-12-ie8">
								<p class="mb-alpha">Each year, Oscar attempts the four hundred mile walk from Newport Beach to Berkeley, California. In the twelve years that he's attempted this, he's never made it farther than UC Irvine.</p>
							</div>
						</div>
					</div>

					<div class="mb-gamma col span_12_vpalpha span_3_vpgamma...

CSS

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

html { height: 100%; font-size: 100%}

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    background: #f9f9f9;
    font-weight: 300;
    font-size: 1em;
    color: #333;
    overflow: scroll;
    overflow-x: hidden;
}

a {
	color: #555;
	text-decoration: none;
}

.container {
	width: 100%;
	position: relative;
}

.main,
.container > header {
	width: 95%;
	max-width: 1240px;
	margin: 0 auto;
	position: relative;
	padding: 0 30px 50px 30px;
}

.container > header {
	padding: 30px;
}

.container > header h1 {
	font-size: 34px;
	line-height: 38px;
	margin: 0;
	font-weight: 700;
	color: #333;
	float: left;
}

.container > header h1 span {
	display: block;
	font-size: 20px;
	font-weight: 300;
}

/* Header Style */
.codrops-top {
	line-height: 24px;
	font-size: 11px;
	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}

.codrops-top a {
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.8);
	color: #000;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

/* Demo Buttons Style */
.codrops-demos {
	float: right;
	padding-top: 10px;
}

.codrops-demos a {
    display: inline-block;
    margin: 10px;
    color: #666;
    font-weight: 700;
    line-height: 30px;
    border-bottom: 4px solid transparent;
}

.codrops-demos a:hover {
	color: #000;
	border-color:...