JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div id="mobileApp">
    <div class="position">
        <img id="phone" src="http://www.graphicproducts.com/hub/assets/images/mobile-app.png" alt="Labeling Assistant Mobile App" />
        <div id="contentBox">
            	<h2 class="modern">Go Mobile!<a href="#"><i class="icon-chevron-up icon-white pull-right"></i></a></h2>

            <p>Leading industry publications and companies
                <br />all over the world are giving DuraLabel sign
                <br />and label printers rave reviews. Discover why.</p>
            <button href="#" class="btn">Learn more</button>
        </div>
    </div>
</div>

CSS

.hubPage ul {
    list-style:none;
    margin-left:0;
}
h2.simple {
    font-size:2.8em;
}
.ribbonHeader {
    position:absolute;
    left:-86px;
    top:18px;
}
.ribbonWrap {
    width:21px;
    height:61px;
    background: url('images/ribbon-ends.png') no-repeat top left scroll transparent;
}
.ribbonTip {
    width:40px;
    height:52px;
    background: url('images/ribbon-ends.png') no-repeat top right scroll transparent;
}
.ribbonBody {
    background: url('images/ribbon-sprite.png') repeat-x 0 0 scroll transparent;
    color:#fff;
    font-size:1.7em;
    font-weight:bold;
    padding:17px 2px;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
}
.ribbonHeaderRight {
    position:absolute;
    right:-86px;
    top:25px;
}
.ribbonHeaderRight .ribbonWrap, .ribbonHeaderRight .ribbonBody {
    background-position:bottom right;
}
.ribbonHeaderRight .ribbonTip {
    background-position:left 87%;
}
.diamond {
    position:absolute;
    right:-18px;
    top:25px;
    border:6px solid #e4e4e4;
    transform:rotate(45deg);
}
.subHubs a:link, .subHubs a:visited {
    color:#666768;
    text-decoration:none;
}
.subHubs a:hover {
    color:#fd7800;
    text-decoration:none;
}
.bbThick {
    border-bottom:3px solid #e4e4e4;
}
.hubArticles {
    border:1px solid #666768;
}
.hubArticles h2, .hubPrinters h2, .hubKits h2 {
    background:#666768;
    color:#fff;
    font-size:1.5em;
    padding:2% 5%;
}
.hubArticles h2, .hubKits h2 {
    margin:0;
}
.hubArticles ul {
    margin:0;
}
.hubArticles ul li {
    padding:3% 5%;
}
.hubArticles ul li:nth-child(even) {
    background-color:#e4e4e4;
}
.hubArticles ul li:last-child {
    background-color:#fff;
    border-top:1px solid #e4e4e4;
}
.hubArticles ul li:last-child a {
    color:#fd7800;
}
.hubArticles ul li a {
    color:#000;
}
.hubArticles ul li:nth-child(even):hover, .hubArticles ul li:hover {
    background:#ffa02a;
}
.hubArticles ul li:nth-child(even):hover a, .hubArticles ul li:hover a {
    color:#fff;
   ...

JavaScript

$(document).ready(function () {
    $("#phone").delay(3400).animate({
        bottom: 0
    }, 700, "linear");
    $("#contentBox").delay(3800).animate({
        bottom: 0
    }, 700, "linear").addClass('up');
    $("i").delay(4600).animate({
        transform: 'rotate(-180deg)'    
    }, 100, "linear");

    $("i, #phone, #contentBox h2").click(function () {
        if ($('#contentBox').hasClass('up')) {
            $("#phone, #contentBox").animate({
                bottom: -90
            }, 300, "linear", function () {
                $("i").animate({
                    transform: 'rotate(0deg)'
                }, 200, "linear");
                $("#contentBox").removeClass('up');
            });
        } else {
            $("#phone, #contentBox").animate({
                bottom: 0
            }, 300, "linear", function () {
                $("i").animate({
                    transform: 'rotate(-180deg)'
                }, 100, "linear");
                $("#contentBox").addClass('up');
            });
        }
    });
});