JSFiddle - React, Tailwind, and code Playground

by merganser

HTML

<link rel="stylesheet" href="//getskeleton.com/dist/css/normalize.css">
<link rel="stylesheet" href="//getskeleton.com/dist/css/skeleton.css">
<script src="//fonts.googleapis.com/css?family=Raleway:400,300,600"></script>
<div id="container">
    <div id="col1">
        <!-- Column one start -->
        <div class="standardPadding">
        
        
        	<h3>Application Title</h3>
        <form>
            <div class="row">
                    <input class="u-full-width" type="email" placeholder="Search..." id="searchInput" />
            </div>
        </form>
        
        <form>
          <div class="row">
            <div class="six columns">
              <label for="exampleEmailInput">Your email</label>
                <input class="u-full-width" type="email" placeholder="[email protected]" id="exampleEmailInput" />
            </div>
             <div class="six columns">
              <label for="examplePasswordInput">Your Password</label>
                <input class="u-full-width" type="password" placeholder="***" id="examplePasswordInput" />
            </div>
          </div>
          <label class="example-send-yourself-copy">
              <input type="checkbox" />
            <span class="label-body">Remember Username</span>
          </label>
              <input class="button-primary" type="submit" value="Submit" />
        </form>
        </div>
        <!-- Column one end -->
    </div>
    <div id="col2">
        <!-- Column two start -->
        <div id="row1"> 
            <div class="standardPadding">
                <a id="navigation" href="javascript:;" class="u-pull-left">&#9776;</a>
                <div id="breadcrumb" class="u-pull-left" style="vertical-align:middle; line-height:50px; font-size:25px; padding-left: 5px;">
                    Breadcrumb > Page
                </div>
            </div>
        </div>
        <div id="row2">
            <div id="col3">
                <!-- Column three start -->
        <div...

CSS

/* <!-- */
.standardPadding{padding:0px 5px;}
/* Start of Column CSS */
 #container {
    background:#8C8C8C;
    /* column 1 background colour */
    position:absolute;
    bottom:0px;
    top:0px;
    left:0px;
    right:0px;
}
#col1 {
    background:#8C8C8C;
    color:white; position:absolute;
    bottom:0px;
    top:0px;
    left:0px;
    width:30%;
}
#col2 {
    background:#404040;
    position:absolute;
    bottom:0px;
    top:0px;
    right:0px;
    width:70%;
}
div#row1 {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:50px;
    background:#1E7BA9;
    background: #3b8fcd;
    color:white;
}
div#row2 {
    position:absolute;
    top:50px;
    left:0px;
    right:0px;
    bottom:0px;
    background:#404040;
    color:black;
}
#col3 {
    background:#4CA9D7;
    position:absolute;
    bottom:0px;
    top:0px;
    left:0px;
    width:0%;
    width:33.3%;
}
#col4 {
    background:#8FCAEE;
    position:absolute;
    bottom:0px;
    top:0px;
    left:33.3%;
    width:33.3%;
}
#col5 {
    background:white;
    position:absolute;
    bottom:0px;
    top:0px;
    left:66.6%;
    width:33.3%;
}
a#navigation{text-decoration:none;font-size:2em;}
a#navigation:link{color:white;}
a#navigation:visited{color:white;}
a#navigation:hover{color:#ccc;}


/* --> */

JavaScript

var isopen = true;
$(document).ready(function () {
    $("#navigation").click(function () {
        if (isopen) {


            $("#col1").animate({
                width: "0px"
            }, 500);
            $("#col2").animate({
                width: "100%"
            }, 500);



            $("#col3").animate({
                width: "0px"
            }, 500);
            $("#col4").animate({
                width: "0px"
            }, 500);
            $("#col5").animate({
                left: "0px",
                width: "100%"
            }, 500);

            isopen = false;
        } else {

            $("#col1").animate({
                width: "30%"
            }, 500);
            $("#col2").animate({
                width: "70%"
            }, 500);


            $("#col3").animate({
                width: "33.3%"
            }, 500);
            $("#col4").animate({
                width: "33.3%"
            }, 500);
            $("#col5").animate({
                left: "66.6%",
                width: "33.3%"
            }, 500);

            isopen = true;
        }
    });
});