JSFiddle - React, Tailwind, and code Playground

by hslincoln

HTML

<div id="wrapper">
    <div class="background">
        <div class="areyoualune">
            <p>Are you a Lunatic, Clare?</p>
        </div>
        <div class="metoo">
            <p>Yeah, me too...<br><br>Sunday, 4pm, here:<br><b>bit.ly/1dJuGi1</b></p>
    </div>
    <div class="moonImage"></div>
</div>

CSS

#wrapper {
    position: relative;
    width: 100%;
    min-width:660px;
}
.background .areyoualune {
    position:absolute;
    font-size:20px;
    top:20px;
    color:white;
    margin-left:20px;
}
.moonImage {
    display:none;
    background:url('http://www.harrylincoln.com/clare/images/moon.png');
    width:660px;
    height:370px;
    position:absolute;
    z-index:2;
    text-align:center;
}
.background {
    background:url('http://www.harrylincoln.com/clare/images/background_moon.jpg');
    width:660px;
    height:370px;
    position:absolute;
    z-index:1;
}
.background .metoo {
    display:none;
    font-size:16px;
    color:white;
    text-decoration:italic;
    position:absolute;
    margin-left:40px;
    top:60px;
}

JavaScript

$(document).ready(function () {
    $('.moonImage').fadeIn(6000);
});

$('.metoo').each(function (index) {
    $(this).delay(10000 * index).fadeIn(900);
});