JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="https://raw.github.com/h5bp/html5-boilerplate/master/css/main.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
  <div id="Header">
    <div id="logo"><img src="images/logo-small.png" alt="Company Name - Logo" width="260"><h1>Company Name</h1>
    </div>
    <div id="socialMedia">
      <p>Faceboko Logo, twitter Logo, etc</p></div>
  </div>
  <div id="Nav">This is the content for Layout Div Tag "Nav"</div>
  <div id="pageHeader">This is the content for Layout Div Tag "pageHeader"</div>
  <div id="pageContent">
    <div id="leftContent">This is the content for Layout Div Tag "leftContent"</div>
    <div id="middleContent">This is the content for Layout Div Tag "middleContent"</div>
    <div id="rightContent">This is the content for Layout Div Tag "rightContent"</div>
  </div>
</div>
</body>
</html>

CSS

.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
    margin-top: 1.5%;
    padding-top: 0.9%;
    padding-bottom: 1%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#Header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    box-shadow: 0px 0px 20px 5px rgba(1,1,1,0.3);
    background-color: #CCC;
    background-image: url(../images/white-bg.png);
    border-radius: 15px;
    position: relative;
}
#Nav {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    margin-top: 1%;
    box-shadow: 0px 0px 20px 5px rgba(1,1,1,0.3);
    background-color: #000;
    background-image: url(../images/dark-bg.png);
    padding: 10px 0px 10px 10px;
    border-radius: 15px;
    color:#FFF;
}
#pageHeader {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#pageContent {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#Right {
    clear: both;
    float: left;
    margin-left: 0;
    width: 28.5714%;
    display: block;
}
#Middle {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 38.7755%;
    display: block;
}
#leftContent {
    clear: both;
    float: left;
    margin-left: 0;
    width: 28.5714%;
    display: block;
}
#middleContent {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 38.7755%;
    display: block;
}
#rightContent {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 28.5714%;
    display: block;
}

#logo {
    clear: both;
    float: left;
    margin-left: 0;
    width: 79.5918%;
    display: block;
    vertical-align: text-bottom;
}

#logo h1 {
    display:inline;
    vertical-align:middle;
    margin-left: 20px;
    text-align:center;
}

#title {
    clear: none;
    float: left;
    margin-left:...

JavaScript

/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs  */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1),maxw:D.match(/\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var...