JSFiddle - React, Tailwind, and code Playground

by Daniel Redwood

HTML

<h1><span>N</span><span>y</span><span>l</span><span>o</span></h1>

CSS

html {
    background: #000;
}
body {
    padding: 8px;
    color: #fff;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}
    h1 {
        display: block;
        width: 304px;
        height: 72px;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        /*z-index: 1;*/
        margin: -36px 0 0 -152px;
        overflow: hidden;
        background: url(http://s10.postimg.org/vulctry7t/nylo_Gotham.png) center center no-repeat;
        background-size: cover;
        font-family: gotham, proxima nova, helvetica neue, sans serif;
        font-size: 4em;
        font-weight: 100;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-indent: 304px;
    }
        h1:before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.5));
        }
        h1:after {
            content: "";
            width: 340px;
            height: 340px;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: -2;
            margin: -170px 0 0 -170px;
            /* background: -webkit-linear-gradient(-45deg, #f7f7f7 0%, #7fdfff 100%);
            -webkit-animation: nylo 4s infinite linear; */
            background: url(http://25.media.tumblr.com/tumblr_lq5xz90nYR1qjqymho1_500.gif) center center no-repeat;
            background-size: cover;
        }

/* Animations */

    @-webkit-keyframes nylo {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }