JSFiddle - React, Tailwind, and code Playground

by andys627

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="greenbox" style="font-family: arial; font-weight: bold; color: white; font-style: italic; font-size: 75px; line-height: 54px;">
    <div style="position: relative; top: 30%; text-align: center;">
        <span id="well" style="position: relative; left: -1000px;">MARKETING</span><br />
        <span id="im" style="position: relative; right: -1000px;">INFO</span><br />
        <span id="sorry" style="position: relative; left: -1000px;">HERE</span>
        </div>
</div>

<span id="click" style="display: none;text-decoration: underline; font-size: 25px;">Click me</span>

CSS

html, body {margin: 0; padding: 0; overflow: hidden;}

#greenbox {width: 100%; height: 100%;position: absolute; background: #A2CD43; display: none;}

JavaScript

$(document).ready(function() {
    $('#greenbox').fadeIn(1500, 'easeOutExpo');
    var well = setTimeout(function() {
        $('#well').animate({
            left: '0'
        }, 1000, 'easeOutExpo');
    }, 700);
    var im = setTimeout(function() {
        $('#im').animate({
            right: '0'
        }, 1000, 'easeOutExpo');
    }, 850);
    var sorry = setTimeout(function() {
        $('#sorry').animate({
            left: '0'
        }, 1000, 'easeOutExpo');
    }, 1000);
    var goaway = setTimeout(function() {
        $('#greenbox').animate({
            left: '-1000'
        }, 2000, 'easeOutExpo');
    }, 2500);
});