JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="line"></div>

<div id="frame">
    <img src="http://jakiestfu.com/forrst/misc/@itylerallen/logo.png" id="logo">
    <p><b>Creative</b>Draft is currently being built, but you can still view some of my work over on <a href="#">Forrst.</a> I am also<br />Followable over at <a href="#">Twitter</a> and reachable at <a href="mailto:[email protected]">[email protected]</a></p>
</div>

CSS

body{
    margin:0;
    padding:0;
    background: url('http://jakiestfu.com/forrst/misc/@itylerallen/grain.png');
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 100;
    color:#262a2c;
    text-shadow:0 1px 0 #fff;
}

a, a:visited{
    color:#1a869d;
    text-decoration:none;
}

a:hover{
    color:#262a2c;
    -webkit-transition: all 0.3s linear; 
    -moz-transition: all 0.3s linear; 
    -o-transition: all 0.3s linear; 
    transition: all 0.3s linear;
}

#line{
    position:absolute;
    top:0;
    left:0;
    height:18px;
    background:#262a2c;
}

#frame{
    text-align:center;
    
    position:relative;
    top:-15px;
    opacity:0;
}
#logo{
    margin-top:100px;
    margin-bottom:100px;
}

#frame p{
    margin-top:50px;
    margin-bottom:50px;
    line-height:25px;
}

JavaScript

function animate() {

    $('#line').animate({
        width: '100%',

    }, 1000, function() {

        $('#frame').animate({
            top: 0,
            opacity: 1
        });

    });

}


setTimeout(animate, 1000);