JSFiddle - React, Tailwind, and code Playground

by chadarsenault

HTML

<div class="container">
    <div class="hero"></div>
    <div class="lower">
        <div class="captions">
            <span class="top"></span>
            <span class="bottom"></span>
        </div>
        <div class="logo">
            <img src="http://youarethetest.rinckadvertising.com/images/yatt-blue.png">
        </div>
        <div class="text">
            <p>New experiment creating customers for life.<br>
                <strong>E-Cigarettes</strong>, just another claim brought to you by big tobacco.</p>
        </div>
    </div>
    <div class="footer">
        YouAreTheTest.com
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Special+Elite);
* {
    box-sizing: border-box;
}

body {
    font-family: 'Special Elite', cursive;
    line-height: 1.413;
}

@-webkit-keyframes fadein {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes filters {
    0%  {-webkit-filter: contrast(1); }
    7%  {-webkit-filter: contrast(1.6); }
    15% {-webkit-filter: saturate(1) contrast(1.2); }
    30% {-webkit-filter: saturate(2) contrast(2); }
    35% {-webkit-filter: saturate(1) contrast(1); }
    39% {-webkit-filter: contrast(1.2); }
    40% {-webkit-filter: contrast(1.2) invert(1);  }
    41% {-webkit-filter: contrast(1.2); }
    42% {-webkit-filter: contrast(1); }
    50% {margin-left: 0px; }
    51% {margin-left: -1px; }
    52% {margin-left: 1px; }
    53% {margin-left: -1px; }
    54% {margin-left: 0px; }
    75% {-webkit-filter: contrast(1.6); }
    76% {width:100%;}
    77% {width:1000px; }
    78% {width:100%;}
    80% {-webkit-filter: contrast(1.4); }
    85% {-webkit-filter: contrast(1.2); }
}
.container {
    width: 600px;
}
.hero {
    background: url('http://youarethetest.rinckadvertising.com/images/monkey.jpg') center no-repeat;
    width: 100%;
    height: 500px;
    background-size: cover;
    -webkit-animation-name: filters;
    -webkit-animation-duration: 5s;
}

.lower {
    background: #fff;
}

.captions > span {
    background: black;
    color: white;
    display: inline-block;
    padding: 0 1rem;
    margin: 0 0 1rem 0;
    vertical-align: top;
}

.logo {
    padding: 2rem 0;
    text-align: center;
    opacity: 0;
    -webkit-animation: fadein 2s ease-in forwards;
    -webkit-animation-delay: 12s;
    width: 600px;
    text-align: center;
}

.logo img {
    width: 75%;
    height: auto;
}

.text {
    margin: 2rem;
    opacity: 0;
    -webkit-animation: fadein 2s ease-in forwards;
    -webkit-animation-delay: 16s;
}

.footer {
    background: #65cff4;
    padding: 0.8rem 0 0.4rem 0;
    text-align: center;
   ...

JavaScript

var Typed = function(el, options){

        // chosen element to manipulate text
        this.el = $(el);

        // options
        this.options = $.extend({}, $.fn.typed.defaults, options);

        // text content of element
        this.baseText = this.el.text() || this.el.attr('placeholder') || '';

        // typing speed
        this.typeSpeed = this.options.typeSpeed;

        // add a delay before typing starts
        this.startDelay = this.options.startDelay;

        // backspacing speed
        this.backSpeed = this.options.backSpeed;

        // amount of time to wait before backspacing
        this.backDelay = this.options.backDelay;

        // input strings of text
        this.strings = this.options.strings;

        // character number position of current string
        this.strPos = 0;

        // current array position
        this.arrayPos = 0;

        // number to stop backspacing on.
        // default 0, can change depending on how many chars
        // you want to remove at the time
        this.stopNum = 0;

        // Looping logic
        this.loop = this.options.loop;
        this.loopCount = this.options.loopCount;
        this.curLoop = 0;

        // for stopping
        this.stop = false;

        // show cursor
        this.showCursor = this.isInput ? false : this.options.showCursor;

        // custom cursor
        this.cursorChar = this.options.cursorChar;

        // attribute to type
        this.isInput = this.el.is('input');
        this.attr = this.options.attr || (this.isInput ? 'placeholder' : null);

        // All systems go!
        this.build();
    };

        Typed.prototype =  {

            constructor: Typed

            , init: function(){
                // begin the loop w/ first current string (global self.string)
                // current string will be passed as an argument each time after this
                var self = this;
                self.timeout = setTimeout(function() {
                   ...