JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	<h1>RasmusFl0e</h1>
	<p class="meta">Front-end developer, Copenhagen, Denmark</p>
</header>

<div class="block block--blue block--large">
	<h2><a href="#">Design your layouts to be Content-first</a></h2>
	<p class="meta"><span><time datetime="2014-11-11" itemprop="datePublished">November 11th, 2014</time></span><span><span>HTML</span>, <span>CSS</span>, <span>Layout</span></span>
	</p>
	<p itemprop="description">A technique to do advanced flexible layouts beyond standard rows/columns without additional structural markup.</p>
</div>

<div class="block block--grey">
	<h2><a href="#">Combine-layout</a></h2>
	<p class="meta"><span><time datetime="2014-11-11" itemprop="datePublished">November 11th, 2014</time></span><span><span>HTML</span>, <span>CSS</span>, <span>Layout</span></span>
	</p>
	<p itemprop="description">A technique to do advanced flexible layouts beyond standard rows/columns without additional structural markup.</p>
</div>

CSS

:root {
	--color-white: #FFF;
	--color-black: #202020;
	--color-blue: #55B3EA;
	--color-purple: #6F2CCE;
	--color-grey-light: rgba(0, 0, 0, .1);
	--color-grey-dark: rgba(0, 0, 0, .1);
	--color-bg: var(--color-white);
	--color-text: var(--color-black);
}

* {
	padding: 0;
	margin: 0;
}

*, *:before, *:after {
	box-sizing: border-box;
}

body {
	padding: 0 40px;
	max-width: 55em;
	margin: 0 auto;
	color: var(--color-text);
	font: 16px/1.5 "Helvetica Neue", Arial, sans-serif;
	-webkit-text-size-adjust: none;
	background: #FFF none no-repeat;
	background-image:...