JSFiddle - React, Tailwind, and code Playground

by Gonzalo Guevara

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="http://webfordesigners.net/micdn/waypoints/lib/jquery.waypoints.min.js"></script>
<div id="page-container" class="header-fixed-top collapse-header">
    <!-- Main Header -->
    <header class="fixed-top">
        <div class="brand">
            <div class="brand-holder">
                <div class="brand-img">
                    <img src="https://www.greensock.com/forums/uploads/packages-0451787001407339657.png" alt="" />
                </div>
            </div>
        </div>
        <div class="header-content">
            <div class="my-container">
                <div class="col-sm-8">
                    <form class="hide-element">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>
                    </form>
                </div>
                <div class="col-sm-4">
                    <ul class="nav nav-pills">
                        <li role="presentation" class="active"><a href="#">Home</a>
                        </li>
                        <li role="presentation"><a href="#">Profile</a>
                        </li>
                    </ul>
                    <div class="input-group hide-element"> <span class="input-group-btn">
                   ...

CSS

body {
    margin: 0;
}
* {
    box-sizing: border-box;
}
p {
    color: brown;
    margin: 0;
}
.fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1030;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
}
#page-container {
    width: 100%;
}
.brand img {
    height: 70px;
}
#page-container.header-fixed-top {
    padding: 140px 0 0;
}
header {
    background: violet;
    height: 140px;
}
#sidebar {
    background: deeppink;
    width: 200px;
}
.header-fixed-top #sidebar {
    position: fixed;
    height: 100%;
}
.header-fixed-top #page-content {
    margin-left: 200px;
}
.my-container {
    width: 100%;
}
#main-container {
    height: 800px;
}
.brand, .header-content {
    display: inline-block;
}
.brand {
    background: cornflowerblue;
}
.brand-holder {
    width: 200px;
    display: table;
    height: 140px;
    text-align: center;
}
.brand-img {
    display: table-cell;
    vertical-align: middle;
}
.header-content {
    background: goldenrod;
    height: 140px;
    position: absolute;
    left: 200px;
    right: 0;
}

JavaScript

/*global TweenMax,TimelineMax*/
/* ejemplo con tweenmax */

$(document).ready(init);

function init() {
    var header, pageContainer, pageContent, brandImage, brandHolder, headerContent, hideElement;
    var duration = .8,
        ease = 'Power4.easeInOut',
        stagger = duration * .2;
    var minHeight = 45;
    var brandHeight = minHeight - 10;
    var classNameResized = 'resized';
    var classNameHidden = 'has-hided';
    var fadeTween = null,
        heightTween = null,
        paddingTween = null,
        imageTween = null;
    header = $('header');
    pageContainer = $('#page-container');
    pageContent = $('#page-content');
    brandImage = $('.brand img');
    brandHolder = $('.brand-holder');
    headerContent = $('.header-content');
    hideElement = $('.hide-element');
    //functions
    initTweens();
    collapseHaeder();

    function initTweens() {
        fadeTween = TweenMax.to(hideElement, duration, {
            autoAlpha: 0,
            display: 'none',
            ease: ease,
            paused: true
        });
        heightTween = TweenMax.to([header, brandHolder, headerContent], duration, {
            height: minHeight,
            ease: ease,
            paused: true,
            delay: stagger
        });
        paddingTween = TweenMax.to(pageContainer, duration, {
            paddingTop: minHeight,
            ease: ease,
            paused: true,
            delay: stagger
        });
        imageTween = TweenMax.to(brandImage, duration, {
            height: brandHeight,
            ease: ease,
            paused: true,
            delay: stagger
        });
    }

    function addClasses() {
        if (!header.hasClass(classNameResized)) {
            header.addClass(classNameResized);
            brandHolder.addClass(classNameResized);
            headerContent.addClass(classNameResized);
        }
        if (!hideElement.hasClass(classNameHidden)) {
            hideElement.addClass(classNameHidden);
        }
    }

 ...