JSFiddle - React, Tailwind, and code Playground

by Kitson Broadhurst

HTML

<body>
		<div class="container-fluid">
        	<div class="row line1">
            	<div class="col-xs-12 text-wrapper">
                	<p class="Manus"><span class="text"></span><span class="logo"></span><span class="EvelethLight"></span></p>
                </div>
            </div>
            <div class="row line2">
            	<div class="col-xs-12 text-wrapper">
                	<p class="Manus"><span class="hook"></span></p>
                </div>
            </div>
            <div class="row line3">
            	<div class="col-xs-12 text-wrapper">
                	<p class="Manus"><span class="hook2"></span></p>
                </div>
            </div>
            <div class="row subscribe">
            	<div class="col-xs-4 col-xs-offset-4">
                	<!-- Begin MailChimp Signup Form -->
					<div id="mc_embed_signup">
						<form action="//chasinged.us8.list-manage.com/subscribe/post?u=d374e6e95d4b8578a440450b3&amp;id=c0a63c5888" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
						<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email Address" required>
    					<div style="position: absolute; left: -5000px;"><input type="text" name="b_d374e6e95d4b8578a440450b3_c0a63c5888" tabindex="-1" value=""></div>
    					<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
						</form>
					</div>
					<!--End mc_embed_signup-->
                </div>
            </div>
        </div>
    </body>

CSS

p {
	line-height: 75px;
}

.line1 {
	position: relative;
	height: 200px;
    margin-top: 15%;
}

.line2 {
	position: relative;
	margin-top: 5%;
}

.line3 {
	position: relative;
	margin-top: 15%;
}

.text-wrapper {
    text-align: center;
	position: absolute;
	bottom: 0;
}

.hook {
	font-size: 20px;
}

.hook2 {
	font-size: 30px;
}

.logo {
	font-size: 100px;
}

/** Webfonts **/
.Manus { 
	font-family: Manus;
	font-weight: normal;
	font-style: normal;
	font-size: 36px;
}
.EvelethLight { 
	font-family: EvelethLight;
	font-weight: normal;
	font-style: normal;
	font-size: 100px;
	color: #f91616;
}

.subscribe {
	display: none;
}

#mc_embed_signup {
	padding-top: 25px;
	background:#fff; 
	clear:left; 
	font:14px Helvetica,Arial,sans-serif;
}

/* MailChimp Form Embed Code - Slim - 08/17/2011 */
#mc_embed_signup form {
	display:block; 
	position:relative; 
	text-align:left; 
	padding:10px 0 10px 3%;
}
#mc_embed_signup h2 {
	font-weight:bold; 
	padding:0; 
	margin:15px 0; 
	font-size:1.4em;
}
#mc_embed_signup input {
	border:1px solid #999; 
	-webkit-appearance:none;
}
#mc_embed_signup input[type=checkbox]{
	-webkit-appearance:checkbox;
}
#mc_embed_signup input[type=radio]{
	-webkit-appearance:radio;
}
#mc_embed_signup input:focus {
	border-color:#333;
}
#mc_embed_signup .button {
	clear:both; 
	background-color: #aaa; 
	border: 0 none; 
	border-radius:4px; 
	color: #FFFFFF; 
	cursor: pointer; 
	display: inline-block; 
	font-size:15px; 
	font-weight: bold; 
	height: 32px; 
	line-height: 32px; 
	margin: 0 5px 10px 0; 
	padding:0; 
	text-align: center; 
	text-decoration: none; 
	vertical-align: top; 
	white-space: nowrap; 
	width: auto;
}
#mc_embed_signup .button:hover {
	background-color:#f91616;
	color: #000;
}
#mc_embed_signup .small-meta {
	font-size: 11px;
}
#mc_embed_signup .nowrap {
	white-space:nowrap;
}     
#mc_embed_signup .clear {
	clear:none; 
	display:inline;
}
#mc_embed_signup label {
	display:block; 
	font-size:16px; 
	padding-bottom:10px;...

JavaScript

var text = "Welcome to ";
var logo = "Our Lo ";
var hook = "A tag line in smaller text below the logo...";
var hook2 = "We're almost ready to launch, Subscribe and be the first to know!";
var i = 0;
var j = 0;
var k = 0;
var l = 0;
var speed = 100;

function writeLogo() {
    var currentLetter = logo.charAt(j);
    j++;
    $('.logo').append(currentLetter);
    if (j == logo.length) {
        clearInterval(timerLogo);
        $('.EvelethLight').append('g');
        setTimeout(function () {
            $('.EvelethLight').append('o');
        }, speed);
    }
}

function writeLetter() {
    var currentLetter = text.charAt(i);
    i++;
    $(".text").append(currentLetter);
    if (i == text.length) {
        clearInterval(timerId);
        timerLogo();
    }
}

function writeText() {
	var currentLetter = hook.charAt(k);
	k++;
	$('.hook').append(currentLetter);
	if (k == hook.length) {
		clearInterval(timerText);
	}
}

function writeHook() {
	var currentLetter = hook2.charAt(l);
	l++;
	$('.hook2').append(currentLetter);
	if (l == hook2.length) {
		clearInterval(timerText);
	}
}

var timerLogo = function() {
    setInterval(writeLogo, speed);
};

var timerId = function () {
	setInterval(writeLetter, speed);
};

var timerText = function () {
	setInterval(writeText, 60);
};

var timerHook = function () {
	setInterval(writeHook, 60);
}
	
var main = function() {
	timerId();
	setTimeout(function () {
		timerText();
	}, 2300);
	setTimeout(function () {
        $('.line1').animate({marginTop:'0'},'slow');
	}, 6100);
	setTimeout(function() {
		timerHook();
	}, 6500);
	setTimeout(function () {
		$('.subscribe').show('slow');
	}, 10500);
}

$(document).ready(main);