JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://tympanus.net/Tutorials/AnimatedOpeningType/js/modernizr.custom.js"></script>

<div class="component">
    <ul class="grid">
        <li class="ot-letter-left"><span data-letter="Ц">Ц</span></li>
        <li class="ot-letter-top"><span data-letter="J">J</span></li>
        <li class="ot-letter-right"><span data-letter="8">8</span></li>
        <li class="ot-letter-bottom"><span data-letter="A">A</span></li>
        <li class="ot-letter-left"><span data-letter="O">O</span></li>
        <li class="ot-letter-left"><span data-letter="Q">Q</span></li>
        <li class="ot-letter-right"><span data-letter="S">S</span></li>
        <li class="ot-letter-left"><span data-letter="B">B</span></li>
        <li class="ot-letter-top"><span data-letter="L">L</span></li>
        <li class="ot-letter-right"><span data-letter="T">T</span></li>
        <li class="ot-letter-left"><span data-letter="K">K</span></li>
        <li class="ot-letter-top"><span data-letter="S">S</span></li>
        <li class="ot-letter-left"><span data-letter="Z">Z</span></li>
        <li class="ot-letter-top"><span data-letter="3">3</span></li>
        <li class="ot-letter-right"><span data-letter="D">D</span></li>
        <li class="ot-letter-bottom"><span data-letter="I">I</span></li>
        <li class="ot-letter-right"><span data-letter="H">H</span></li>
        <li class="ot-letter-bottom"><span data-letter="Q">Q</span></li>
        <li class="ot-letter-right"><span data-letter="E">E</span></li>
        <li class="ot-letter-left"><span data-letter="A">A</span></li>
        <li class="ot-letter-top"><span data-letter="P">P</span></li>
        <li class="ot-letter-right"><span data-letter="F">F</span></li>
        <li class="ot-letter-left"><span data-letter="S">S</span></li>
        <li class="ot-letter-top"><span data-letter="K">K</span></li>
        <li class="ot-letter-left"><span data-letter="U">U</span></li>
        <li class="ot-letter-top"><span data-letter="L">L</span></li>
 ...

CSS

/* grid */
.grid {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
}

.grid li {
    position: relative;
    float: left;
    font-size: 12em;
    line-height: 1.5;
    max-height: 290px;
    text-align: center;
    width: 16.6666667%;
    /* Fallback */
    width: -webkit-calc(100% / 6);
    width: calc(100% / 6);
}

/* Common styles for the letters */
.grid li span {
    display: inline-block;
    font-weight: 900;
    line-height: 1;
    position: relative;
    color: hsla(0, 0%, 0%, 0.6);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 550px;
    -ms-perspective: 550px;
    perspective: 550px;
    z-index: 1;
}

.grid li span:before,
.grid li span:after {
    position: absolute;
    content: attr(data-letter);
    line-height: inherit;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.grid li span:before {
    text-shadow: none;
    color: hsla(0, 0%, 0%, 0.12);
}

/* Colors */

.ot-letter-left { background: #e74d3c; }
.ot-letter-left span { text-shadow: 1px 4px 6px #e74d3c, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e74d3c; }
.ot-letter-left span:after { color: #e74d3c; }
.ot-letter-left:hover span:after { color: #ea6253; }

.ot-letter-right { background: #ea6657; }
.ot-letter-right span { text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657; }
.ot-letter-right span:after { color: #ea6657; }
.ot-letter-right:hover span:after { color: #ed7a6e; }

.ot-letter-top { background: #ee7f72; }
.ot-letter-top span { text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72; }
.ot-letter-top span:after { color: #ee7f72; }
.ot-letter-top:hover span:after { color: #f09389; }

.ot-letter-bottom { background: #e95949; }
.ot-letter-bottom span { text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3),...