JSFiddle - React, Tailwind, and code Playground

by il kamil

HTML

<script src="http://www.trevorgoodman.com/dev/scripts/stickyMojo.js"></script>
<div id="wrapper">
    	<div id="sidebar">
   	    <img src="http://trevorgoodman.com/dev/images/twiticon.png" width="40" height="40" alt="Twitter Icon"> 
        <img src="http://trevorgoodman.com/dev/images/fbicon.png" width="40" height="40" alt="Facebook icon"> 
        <img src="http://trevorgoodman.com/dev/images/linkicon.png" width="40" height="40" alt="Linkedin icon"> 
        <img src="http://trevorgoodman.com/dev/images/emailicon.png" width="40" height="40" alt="Email me"> </div>
  <div id="right-side"></div>
  <div id="left-side"></div>
    	<nav>
        	<h1>TREVOR <img src="images/tg-icon.png" width="98" height="95" alt="TG icon"> GOODMAN</h1>
		<h2>design  |  ui  |  web  |  art direction</h2>
        </nav>
        <div id"samples">
        	<ul>
            	<li class="single-imgs"><img src="images/blank.png">
                <li class="single-imgs"><img src="images/blank.png">
                <li class="single-imgs"><img src="images/blank.png">
                            	<li class="single-imgs"><img src="images/blank.png">
                <li class="single-imgs"><img src="images/blank.png">
                <li class="single-imgs"><img src="images/blank.png">
                            	<li class="single-imgs"><img src="images/blank.png">
                <li class="single-imgs"><img src="images/blank.png">
                <li class="single-imgs"><img src="images/blank.png">
                            	<li class="single-imgs"><img src="images/blank.png">
                <li class="single-imgs"><img src="images/blank.png">
                <li class="single-imgs"><img src="images/blank.png">
                            	<li class="single-imgs"><img src="images/blank.png">
                <li class="single-imgs"><img src="images/blank.png">
                <li class="single-imgs"><img src="images/blank.png">
            </ul>
        </div>
</div>
	<div...

CSS

/* Large desktop */

/*@media (min-width: 1200px) {*/

* {
	margin: 0 auto;
}

html, body {
	height: 100%;
}

/* Layout */
body {
	margin:0;
	padding:0;
	background: url(http://trevorgoodman.com/dev/images/screened-bknd.jpg) no-repeat;
		background-color: #CCCCCC;
}

#wrapper {
	width: 1100px;
	min-height: 100%;
	height: 100%;
	height: auto !important;
	position: relative;
}

#left-side {
	width: 30px;
	height: 520px;
	float: left;
	position: relative;
	background-image: url(http://trevorgoodman.com/dev/images/left-side-shadow.jpg);
}

#right-side {
	width: 30px;
	height: 520px;
	float: right;
	margin-right: -15px;
	position: relative;
	background-image: url(http://trevorgoodman.com/dev/images/right-side-shadow.jpg);
}

#sidebar {
	 width: 40px;
	 background-color: #ffc23e;
	 min-height: 200px;
	 margin: 269px 0 0 0;
	 padding: 15px 10px;
	 float: right;
}

#main {
	width:100%;
	height: auto;
	float: left;
}

nav {
	width: 1000px;
	height: 230px;
	/*margin-left: 2.85%;*/
	background:url(http://trevorgoodman.com/dev/images/nav-bknd.jpg) no-repeat;
}

#footer {
  width: 940px;
  clear:both;
  background-color: white;
  height: 100px;
  margin-top: 100px;
}

/* typography */
@font-face {
    font-family: "rawengulkregular";
    src: url("type/rawengulkregular-webfont.eot");
    src: url("type/rawengulkregular-webfont.eot?#iefix") format('embedded-opentype'),
         url("type/rawengulkregular-webfont.woff") format('woff'),
         url("type/rawengulkregular-webfont.ttf") format('truetype'),
         url("type/rawengulkregular-webfont.svg#rawengulkregular") format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
	font-family: 'rawengulkregular' arial, sans-serif;
	font-size: 40px;
	letter-spacing: 20px;
	padding-top: 5%;
	text-align: center;
	text-shadow: 2px 2px 2px #d7d8d9;
}

h2 {
	font-family: 'rawengulkregular' arial, sans-serif;
	font-size: 25px;
	color: white;
	letter-spacing: 5px;
	margin-top: 3.6%;
	margin-right: 10%;
	float:...

JavaScript

$(document).ready(function(){
    $('#sidebar').stickyMojo({footerID: '#footer', contentID: '#samples'});
  });