JSFiddle - React, Tailwind, and code Playground

by Ryan Mitchell

HTML

<div id="head-wrapper">
		<div id="head-title">
		</div>
		<div id="head-links">
			<div id="head-githubLink">
				<a href="https://github.com/Crystic"><img src="images/github.png"></a>
			</div>
			<div id="head-twitterLink">
				<a href="http://www.twitter.com/ARavinMadMonkey"><img src="images/twitter.png"></a>
			</div>
			<div id="head-twitchLink">
				<a href="http://www.twitch.tv/aravinmadmonkey"><img src="images/twitch.png"></a>
			</div>
			<div id="head-youtubeLink">
				<a href="http://www.youtube.com/user/KeyCutterz"><img src="images/youtube.png"></a>
			</div>
		</div>
		<div id="head-navRight">
			<ul>
				<li><a href="#" title="Home">Home</a></li>
				<li><a href="#" title="Development">Development</a></li>
				<li><a href="#" title="Entertainment">Entertainment</a></li>
				<li><a href="#" title="About">About</a></li>
			</ul>
		</div>
	</div>
	
	<div id="body-wrapper">
		<div id="body-wrapperLeft">
			<div id="body-contentDivider">
				<h1>Current Project</h1>
			</div>
		</div>
		<div id="body-wrapperRight">
			<div id="body-contentDivider">
				<h1>Twitter Feed</h1>
			</div> 
			
			<div id="body-twitterFeed">
				<a class="twitter-timeline" href="https://twitter.com/ARavinMadMonkey" data-widget-id="347000705833398272" data-chrome="noscrollbar transparent" border-color="#DBDBDB">Tweets by @ARavinMadMonkey</a>
				<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>				
			</div>
		</div>
	</div>
	
		<div id="foot-wrapper">
			<div id="foot-text">
				©Chris 'Crystic' Edwicker 2014
			</div>
		</div>

CSS

/*Head Start*/
#head-wrapper{
	width:900px;
	height: 15%;
	overflow:  hidden;
	background: url(images/bg02.jpg) repeat;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	margin:auto;
}

#head-title{
	background: url(images/Logo.png) no-repeat;
	height: 125px;
	max-width: 400px;
}

#head-navRight{
	color: #fff;
	float: right;
	margin-top: -3%;
	padding-right:2%;
	font-size: 15pt;
}

#head-navRight li{
	padding-right: 2px;
	display: inline;
	margin-left: 15px;
}

/*Links Start*/
#head-links{
	height: 64px;
	width: 320px;
	float: right;
	margin-top: -110px;
	display:inline;
}

#head-youtubeLink{
	height: 64px;
	width: 64px;
	float: left;
}

#head-twitchLink{
	height: 64px;
	width: 64px;
	float: left;
	margin-right: 10px;
}

#head-twitterLink{
	background: url(images/twitter.png) no-repeat;
	height: 64px;
	width: 64px;
	float: left;
	margin-right: 10px;
}

#head-githubLink{
	background: url(images/github.png) no-repeat;
	height: 64px;
	width: 64px;
	float: left;
	margin-right: 10px;
}
/*Links End*/
/*Head End*/

/*Body Start*/
#body-wrapper{
	width:900px;
	margin: auto;
	height: 80%;
}
#body-wrapperLeft{
	background: url(images/bg03.jpg) repeat;
	width: 500px;
	float: left;
	height: 100%;
}

#body-contentDivider{	
		border-bottom: 1px solid #DBDBDB;
		margin: 0 20px 10px;
		text-align: center;
	}

#body-wrapperRight{
	background: url(images/bg03.jpg) repeat;
	width: 350px;
	float: right;
	height: 100%;
}

#body-twitterFeed{
	height: 80%;
	padding: 5px 10px 5px 10px;
	overflow: hide;
}

@media screen and (max-height: 30rem) {
    .twitter-timeline {
        height: 10rem;
    }
}
@media screen and (min-height: 30rem) {
    .twitter-timeline {
        height: 10rem;
    }
}

/*Body End*/

/*Foot Start*/
#foot-wrapper{
	width:900px;
	height: 5%;
	overflow:  hidden;
	background: url(images/bg02.jpg) repeat;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	margin:auto;
}

#foot-text{
	font-size: 8pt;
	color: #fff;
	float: right;
	margin: 2%...

JavaScript

/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
window.matchMedia=window.matchMedia||(function(e,f){var c,a=e.documentElement,b=a.firstElementChild||a.firstChild,d=e.createElement("body"),g=e.createElement("div");g.id="mq-test-1";g.style.cssText="position:absolute;top:-100em";d.style.background="none";d.appendChild(g);return function(h){g.innerHTML='&shy;<style media="'+h+'"> #mq-test-1 { width: 42px; }</style>';a.insertBefore(d,b);c=g.offsetWidth==42;a.removeChild(d);return{matches:c,media:h}}})(document);

/*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs  */
(function(e){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches;if(respond.mediaQueriesSupported){return}var w=e.document,s=w.documentElement,i=[],k=[],q=[],o={},h=30,f=w.getElementsByTagName("head")[0]||s,g=w.getElementsByTagName("base")[0],b=f.getElementsByTagName("link"),d=[],a=function(){var D=b,y=D.length,B=0,A,z,C,x;for(;B<y;B++){A=D[B],z=A.href,C=A.media,x=A.rel&&A.rel.toLowerCase()==="stylesheet";if(!!z&&x&&!o[z]){if(A.styleSheet&&A.styleSheet.rawCssText){m(A.styleSheet.rawCssText,z,C);o[z]=true}else{if((!/^([a-zA-Z:]*\/\/)/.test(z)&&!g)||z.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:z,media:C})}}}}u()},u=function(){if(d.length){var x=d.shift();n(x.href,function(y){m(y,x.href,x.media);o[x.href]=true;u()})}},m=function(I,x,z){var G=I.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),J=G&&G.length||0,x=x.substring(0,x.lastIndexOf("/")),y=function(K){return...