JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<div id="articles">
	<div class="main">
		<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>
<!--------------Article-------------->
			<div class="mb-gamma col span_12_vpalpha span_3_vpgamma span_3_ie8">
				<div class="row cf">
					<div class="col span_3_vpalpha push_9_vpalpha span_12_vpgamma pull_push_0_vpgamma span_12_ie8">
						<img class="mb-alpha" src="http://lorempixel.com/300/300/people/9">
					</div>
					<div class="col span_9_vpalpha pull_3_vpalpha span_7_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
						<h1>Well Red</h1>
					</div>
					<div class="col span_9_vpalpha pull_3_vpalpha span_2_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
						<small class="d-iblock mb-alpha"><sub>29 Feb, 2052</sub></small>
					</div>
					<div class="col span_12_vpalpha pull_3_vpbeta span_9_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
					<p class="mb-alpha">What is she doing at a beauty pageant? Is she running the lights or something? I'm foolish and I'm funny and I'm needy. Am I needy?</p>
					</div>
				</div>
			</div>
<!--------------Article-------------->
			<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;
}

.main{
	width: 95%;
	max-width: 800px;
	margin: 0 auto;
	position: relative;
	padding: 0 30px 50px 30px;
}
/************************* 
DEMO STYLES
*************************/

/* Component Style */

body {
	background-color: #fff;
}

img {
	width: auto;
	max-width: 100%;
	height: auto;
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
}

.highlight {
	background: transparent;
	min-height: 32px;
	min-height: 2rem;
	box-shadow: inset 0 0 5px hsla(0, 0%, 0%, .15);
}
.highlight .highlight {
	background: #7BCDC8;
	box-shadow: none;
}
.decoration:before {
	content: "IE D\003A";
	font-weight: bold;
	white-space: pre;
}
.resize {
	position: fixed;
	background-color: #7BCDC8;
	background-color: hsla(176, 45%, 64%, .75);
	color: #fff;
	bottom: 0;
	right: 0;
	padding: .5em 4em 3em;
	-webkit-transform: translate(70px, 15px) rotate(-45deg);
	-o-transform: translate(70px, 15px) rotate(-45deg);
	transform: translate(70px, 15px) rotate(-45deg);
	z-index: 1000;
}
.ac { text-align: center;}
.mb-alpha {
	margin-bottom: 16px;
	margin-bottom: 1rem;
}
.mb-gamma {
	margin-bottom: 48px;
	margin-bottom: 3rem;
}
.d-iblock { display: inline-block;}
.row {
	margin-left: -24px;
	margin-left: -1.5rem;
}
.ie8 .row { /* margin-left: 0 */}

.col {
	position:...