JSFiddle - React, Tailwind, and code Playground

by Aaron Kahlhamer

HTML

<script src="https://c9.io/aaronkahlhamer/random-hosting-stuff/workspace/jsfiddle/js/script.min.js"></script>
<header class="header">
			<div><span></span>Built by Mayvillites</div>
	</header>
		<section class="introduction">
			<h1>Website Architects, <br/>
				Locally Grown</h1>
			<p>Affordable solutions from a dynamic <br/> group of Creatives and Geeks.</p>
			<ol>
				<li>Conceive</li>
				<li>Brainstorm</li>
				<li>Collaborate</li>
				<li>Plan</li>
				<li>Develop</li>
			</ol> 
			<span><img src="https://c9.io/aaronkahlhamer/random-hosting-stuff/workspace/jsfiddle/imgs/wireframe.png" alt=""/></span>
		</section>

		<section class="experience">
			<h2>We create an amazing digital <span>experience</span> for your company...</h2>
			<p class="tidbits">that tells your story through...</p>
			<ol class="tidbits">
				<li><span class="circle-left-gd"></span>Graphic Design</li>
				<li>Elegant Typography<span class="circle-right-et"></span></li>
				<li><span class="circle-left-sw"></span>Savvy Writing</li>
				<li>Professional Photography<span class="circle-right-pp"></span></li>
			</ol>
		</section>

		<section class="responsive">
			<h3>Then, we package it into a website that works fluidly on smartphones, tablets, and desktops.</h3>
			<ol>
				<li><img src="https://c9.io/aaronkahlhamer/random-hosting-stuff/workspace/jsfiddle/imgs/desktop.png" alt=""/></li>
				<li><img src="https://c9.io/aaronkahlhamer/random-hosting-stuff/workspace/jsfiddle/imgs/laptop.png" alt=""/></li>
				<li><img src="https://c9.io/aaronkahlhamer/random-hosting-stuff/workspace/jsfiddle/imgs/tablet.png" alt=""/></li>
				<li><img src="https://c9.io/aaronkahlhamer/random-hosting-stuff/workspace/jsfiddle/imgs/smartphone.png" alt=""/></li>
			</ol>
		</section>

			<aside class="discover">
				<h2>Help us discover who you are.</h2>
				<i>A crew of multifarious talents are ready to help your business grow. First, we need to get to know you better. Get started by reviewing our brief...

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

button, input {
  line-height: normal;
}

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  *overflow: visible;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

.header {
  padding: 0.7em 0.7em 0 0.7em;
}
.header div {
  color: #CCC;
  display: block;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 22px;
  margin: 0;
  padding: 0 0 1.3em 1.2em;
  width: 100%;
}
.header span {
  background: #ccc;
  height: 22px;
  margin: 0 0 0 -27px;
  position: absolute;
  width: 22px;
}

.introduction {
  padding: 0 0.7em;
}
.introduction h1 {
  color: #3A3A3A;
  display: block;
 ...

JavaScript

$(".introduction h1").fitText(1.2, { minFontSize: '32px', maxFontSize: '52px' });
	$(".introduction p").fitText(2, { minFontSize: '10px', maxFontSize: '24px' });
	$(".experience p").fitText(2, { minFontSize: '22px', maxFontSize: '25px' });
	$(".experience h2, .responsive h3, .discover h2, #lunch h2, #contactUs a").fitText(2, { minFontSize: '25px', maxFontSize: '32px' });