JSFiddle - React, Tailwind, and code Playground

by techydude

HTML

<html>
<head>
    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    
<script type="text/javascript" src="http://blogger-hacks-all.googlecode.com/files/jquery.easing-1.3.min.js"></script>
    
  <script type="text/javascript" src="http://www.evoluted.net/thinktank/demos/simple-jquery-filtering-part2/js/jquery.quicksand.js"></script> 
    
  <script type="text/javascript" src="http://www.evoluted.net/thinktank/demos/simple-jquery-filtering-part2/js/main.js"></script>     
    </head>    
    <body>
<div id="main">

<div class="intro" id="intro">
<div id="gearCont">
<div id="gear">
  </div>
  <div id="gearleft">
  <ul class="navslide">
    <li><a href="#intro">1</a></li>
    <li><a href="#work">3</a></li>
  </ul>
  </div>
  </div>
</div>
<div class="work" id="work"><br />

 <div id="workslide"> <ul class="navslide">
    <li><a href="#intro">1</a></li>
    <li><a href="#work">3</a></li>
  </ul>
  </div>
  <div id="container">
    <ul id="filterOptions">
      <li class="active"><a href="index.html#work" class="all">All Projects</a></li>
      <li><a href="index.html#section1" class="section1">section1</a></li>
      <li><a href="index.html#section3" class="section3">section3</a></li>
      <li><a href="index.html#section2" class="section2">section2</a></li>
    </ul>
      <div id="project_nav">
<ul id="project_nav_home">
    <ul class="ourHolder" >
      <li class="item" data-id="id-1" data-type="section1"> <a href=""><img src="" width="252" height="171"/></a> <a href="">
        <h3>Item</h3>
        </a> </li>
      <li class="item" data-id="id-2" data-type="section1"> <a href=""><img src="" width="252" height="171"/></a> <a href="">
        <h3>Item</h3>
        </a> </li>
      <li class="item" data-id="id-3" data-type="section2"> <a href=""><img src="" width="252" height="171"/></a> <a href="">
        <h3>Item</h3>
        </a> </li>
      <li class="item" data-id="id-4" data-type="section2"> <a...

CSS

#gearCont {
    margin: 0px auto 0 auto;
    height:500px;
    position: relative;
    background-color:#0f0;
}
.intro{
    margin: 0px auto 0 auto;
    height: 1000px;
    width: 100%;
    top: -195px;
    position: relative;
}

.work{
    margin:0px;
    height:1000px;
    width:100%;
    background-color:#454;
}
#container {
    position:relative;
    margin:0 auto;
    min-height:796px;
}

*{
    margin:0;
    padding:0;
}

.intro{
    margin: 0px auto 0 auto;
    height: 1000px;
    width: 100%;
    top: -195px;
    position: relative;
}

.work{
    margin:0px;
    height:1000px;
    width:100%;
}

.navslide {
    position: absolute;
    left: 0px;
    bottom: 0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:50px;
}

ul#filterOptions {
    position:relative;
    margin: 50px auto 0 auto;
    width:520px;
    text-align:center;
}

#workslide {
    width: 140px;
    height: 100px;
    position: relative;
    float: right;
    z-index: 999999999999;
    }


#project_nav {
    position:relative;
    width:1175px;
    left: -23px;
    top:25px;
}
ul#project_nav_home li {
    display:inline-block;
    margin: 16px 16px 0px 16px;
    padding:0 0 15px 0;
}


ul#project_menu{
    position:relative;
    right:10px;
}
ul#project_menu li {
    text-decoration:none;
    display:block;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:12px;
    color:#CCC2C0;
    text-align:left;
    text-transform:uppercase;
}

JavaScript

$(function() {
    $('ul.navslide a').bind('click', function(event) {
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});