JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="torso">
		<div class="main" role="main">
			<h2>Morbi</h2>
			<h3>Pellentesque</h3>
			<p>Suspendisse tincidunt blandit orci, nec convallis <a href="http://handbook.imarc.net/frontend#BrowserSupport">Sed a diam at quam</a> sed aliquet velit id <a href="http://handbook.imarc.net/frontend">Nullam a nibi vitae</a>.</p>

			<h3>Cras malesuada</h3>
			<p>
				Duis elit nulla, sagittis vitae sagittis nec, fringilla nec augue. Fusce mattis tortor ut massa ultrices venenatis. Praesent tincidunt ante purus, ut molestie lacus. Etiam rhoncus venenatis eros, in tempus urna tincidunt vel. Praesent sit amet massa.
			</p>
			<h3>Nulla imperdiet</h3>
			<p>
				Donec ultricies auctor enim in laoreet. Vestibulum vitae ipsum risus. Proin lorem felis, semper at rutrum at, dapibus ut arcu. Cras volutpat interdum venenatis. Integer pulvinar metus laoreet.
			</p>

			<p>
				Mauris dignissim sagittis metus, sed placerat ipsum cursus sit amet. Vivamus iaculis malesuada metus vel volutpat. Praesent pulvinar lacus vel dolor pellentesque sed consequat justo convallis. Integer vel sapien a libero aliquet porttitor a in felis. Nulla in ipsum quis felis lacinia vulputate. Phasellus eu nisi nec erat hendrerit mattis in at nunc. Nullam interdum tempus euismod. Vivamus eleifend:
			</p>

			<dl>
				<dt>AENEAN SED DIAM DIAM. </dt>
				<dd>
					Donec. Donec sit amet nisi enim. Vestibulum neque nisi, venenatis sit amet fermentum ut, tempor at dolor. Morbi varius hendrerit nunc, nec varius neque pellentesque eu. Nulla nec urna in diam consectetur adipiscing nec in dui. Quisque.
				</dd>
				<dt>SUSPENDISSE BLANDIT</dt>
				<dd>
					sed. Etiam laoreet, massa eget ultrices ullamcorper, nisi odio luctus diam, sed vestibulum sem justo id nulla. Vestibulum tempor vestibulum dui, sed fermentum libero vehicula sit amet. Vestibulum vitae sem augue, et aliquet metus. Donec cursus purus eget libero elementum suscipit. Vivamus vehicula auctor tristique.
				</dd>
				<dt>VESTIBULUM LACINIA...

SCSS

/* = Variables = */
$rem:        16px;
$matte:      #2a2a2a; // Mine Shaft
$torso-bg:   #FCFCFC; // Alabaster
$plain-text: #555555; // Emperor
$meta-text:  #888888; // Gray
$border:     #DDDDDD; // Alto

/* = Web Fonts = */
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600);

/* = Base = */
a, abbr, address, article, aside, audio, b, blockquote, body, canvas, cite,
code, dd, div, dl, dt, em, fieldset, footer, form, h1, h2, h3, h4, h5, h6,
header, html, hr, i, iframe, img, label, li, nav, object, ol, p, pre, section,
span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, ul, video {
	border: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 100%;
	font: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	background: $matte;
	color: $plain-text;
	font-family: Arial, Helvetica, sans-serif;
	font-size: $rem;
	line-height: 1.5;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	background: $torso-bg;
	min-width: 300px;
}

.main {
    width: 640px;
    margin: 0 auto;
    padding: 0 $rem;
}

/* = Typography = */
@mixin header-font {
    background: #fff4f4;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;

    padding-top: 1.5 * $rem;
    padding-bottom: 1.5 * $rem;

	&:first-child {
		padding-top: 0;
	}
}

h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
	padding-top: 0;
	margin-top: -$rem;
}

h1 {
	@include header-font;
	font-size: 2.5 * $rem;
	line-height: 1.2;
}

h2 {
	@include header-font;
	font-size: 2 * $rem;
	line-height: 1.2;
}

h3 {
	@include header-font;
	font-size: 1.5 * $rem;
	line-height: 1.3;
}

h4 {
	@include header-font;
	font-size: 1.25 * $rem;
	line-height: 1.4;
}

h5,
h6 {
	@include header-font;
}

.meta {
	color: $meta-text;
	font-size: .75 * $rem;
	margin-bottom: .5em;
	margin-top: -.667em;
}

p {
    background: #f4fff4;
    margin-bottom: 1.5em;
}

ol,
ul,
dl {
   ...