JSFiddle - React, Tailwind, and code Playground

by thwackukulele

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="Carolina Farm Stewardship Association">
  <meta name="author" content="Alexander Belyaev, NacreData L.L.C">
  <title>So & So's Farm | Local Food Finder</title>
  <link href="fonts/titillium.css" rel="stylesheet" type="text/css">
  <link href="css/global.css" rel="stylesheet" type="text/css">
  <link href="css/style-ff.css" rel="stylesheet" type="text/css">
  <script src="/js/libs/jquery-1.7.1.min.js"></script>
  <script src="/js/libs/modernizr-2.0.6.min.js"></script>
</head>

<body>
<h1>(header goes here)</h1>
<div class="whitewrap">
<div class="text960">
<h1 class="w950"><span class="b5">So & So's Farm</span></h1
></div>
<div class="text960">
<div class="w870">
<p>A catch-phrase, blurb or short description about this farm. It should only take up two lines at the maximum. There should be a character limit to achieve this, and that limit is 220 characters.</p>
</div></div>
<div class="text960">
<div class="framewrap">
<iframe width="640" height="480" src="http://www.youtube.com/embed/D35uQCtr4EY" frameborder="0" allowfullscreen class="frame"></iframe></div>
</div></div>
<h1>(footer goes here)</h1>
  </body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

/* Reset */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0;
    border: 0; outline: 0;
    font-weight: inherit; font-style: inherit;
    font-size: 100%; font-family: inherit;
    text-decoration: none;
    vertical-align: baseline;
}
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* standard tags */
body {
    background-image: url(../images/bkgd.jpg);
    background-repeat: repeat;
    color: #3C3527;
    font-family: 'Titillium Regular';
    font-size: 18px;
    height: 100%;
    line-height: 22px;
}

a {
    color: #DA863B;
}

a:hover {
    color: #E06D2D;
}

h1 {
    color: #C4D884;
    font-family: 'Titillium Bold';
    font-size: 24px;
    line-height: 30px;
}

h2, h3, h5 {
    text-transform: uppercase;
}

h2 {
    color: #807152;
    font-family: 'Titillium Medium';
    line-height: 30px;
}

h3, h3 a, h3 a:hover {
    background-color: #DBD6CE;
    color: #FFF;
    font-size: 14px;
    padding: 1px 3px 0 3px;
    margin: 20px 0 5px 0;
}

h4 {
    color: #6E5D3A;
    font-family: 'Titillium Medium';
    font-size: 14px;
    line-height: 24px;
}

h5 {
    color: #807152;
    font-family: 'Titillium Medium';
    font-size: 14px;
    margin-top: 14px;
}

h6 {
    color: #DBD6CE;
    font-size: 12px;
}

p {
    margin-bottom: 5px;
}

/* ids */



/* classes */

.fl {
    float: left;
}
.fr {
    float: right;
}
.clear {
    clear:...