JSFiddle - React, Tailwind, and code Playground

by jspence29

HTML

<div id="letter-container" class="letter-container">
    <h2><a href="#">Saturday <br/> Night <br/> Live</a></h2>
</div>

CSS

body {
background-image: url('http://images.fanpop.com/images/image_uploads/SNL-Wallpaper-saturday-night-live-784022_1024_768.jpg');
background-size: cover;
background: #000;
}

.letter-container h2 a{
text-align: justify;
float: right;
margin-right: 100px;
font-size: 130px;
line-height: 160px;
display: block;
padding-bottom: 30px;
color: #fff;
cursor:default;
text-decoration: none;
}
.letter-container h2 a span {
color: #000;
opacity: 1;
text-decoration: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-animation: sharpen 0.9s linear backwards;    
-moz-animation: sharpen 0.9s linear backwards;    
-ms-animation: sharpen 0.9s linear backwards;
animation: sharpen 0.9s linear backwards;
}
.letter-container h2 a span:nth-child(1) {
    animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
    animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
    animation-delay: 0.2s;
}
.letter-container h2 a span:nth-child(4) {
    animation-delay: 0.3s;
}
.letter-container h2 a span:nth-child(5) {
    animation-delay: 0.4s;
}
.letter-container h2 a span:nth-child(6) {
    animation-delay: 0.5s;
}
.letter-container h2 a span:nth-child(7) {
    animation-delay: 0.8s;
}
.letter-container h2 a span:nth-child(8) {
    animation-delay: 0.9s;
} 
.letter-container h2 a span:nth-child(9) {
    animation-delay: 0.10s;
}
.letter-container h2 a span:nth-child(10) {
    animation-delay: 0.11s;
} 
.letter-container h2 a span:nth-child(11) {
    animation-delay: 0.12s;
}
.letter-container h2 a span:nth-child(12) {
    animation-delay: 0.13s;
} 
.letter-container h2 a span:nth-child(13) {
    animation-delay: 0.14s;
}
.letter-container h2 a span:nth-child(14) {
    animation-delay: 0.15s;
} 
.letter-container h2 a span:nth-child(15) {
    animation-delay: 0.16s;
}
.letter-container h2 a span:nth-child(16) {
    animation-delay: 0.17s;
}...

JavaScript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript">
                $(function() {
                    $("#letter-container h2 a").lettering();
                });
            </script>