JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400' rel='stylesheet' type='text/css'>
<div class="alca">
    <p>&bdquo;Hi, how are you today?&ldquo;</p>
</div>

CSS

.alca{
    background: url("http://dribbble.com/images/bg-head.png");
    height: 59px;
}
.alca p{
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    line-height: 59px;
    color: white;
    padding-left: 1em;
    padding-right: 1em;
    text-shadow: 0px 1px 1px #000000;
    opacity: 0;
    margin-top: -1em;
    position: absolute;
    font-style: italic;
}

JavaScript

$(document).ready(function() {
    $('.alca p').animate({
        'margin-top': 0,
        'opacity': 1,
    }, "slow", function() {});
});