JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container">
        <div class="quote1">
            <div class="quote-wrapper">
                <div class="quote">
                    <div class="text">“Some stuff here...”</div>
                    <div class="author">-- Some guy...</div>
                </div>
                <div class="quote">
                    <div class="text">“Some more stuff here...”</div>
                    <div class="author">-Some gal...</div>
                </div>
                <div class="quote">
                    <div class="text">“Some additional stuff here...”</div>
                    <div class="author">-Some name....</div>
                </div>
            </div>
        </div>
        <!-- end .container -->
    </div>
</body>

CSS

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #eeeeee;
    color: #000000;
    height: 100%;
    position: relative;
}
.quote1 {
    width: 630px;
    position: relative;
    left: 65px;
}
.quote {
    position: absolute;
    overflow: hidden;
    -moz-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    padding-bottom: 0.5em;
    height: auto;
    background-color: rgba(238, 238, 238, 0.75);
    border-radius: 25px;
    -webkit-box-shadow: -20px 25px 25px 0px rgba(0, 0, 0, 0.54);
    -moz-box-shadow: -20px 25px 25px 0px rgba(0, 0, 0, 0.54);
    box-shadow: -20px 25px 25px 0px rgba(0, 0, 0, 0.54);
}
.quote .text {
    padding: 15px;
    color: #000000;
    font-style: italic;
    font-weight: 100;
    zoom: 1;
    font-size: 14px;
}
.quote .author {
    display: block;
    border-top: 1px dotted #4d4d4d;
    color: #BB221B;
    font-size: 1em;
    font-size: 15px;
    text-align: right;
    padding-right: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
}
/*cross browser animations*/
 .quote:nth-child(1) {
    -webkit-animation: cycle 15s 0s infinite linear;
    -moz-animation: cycle 15s 0s infinite linear;
    -o-animation: cycle 15s 0s infinite linear;
    animation: cycle 15s 0s infinite linear;
}
.quote-wrapper:hover .quote {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}
.quote:nth-child(2) {
    -webkit-animation: cycle 15s 5s infinite linear;
    -moz-animation: cycle 15s 5s infinite linear;
    -o-animation: cycle 15s 5s infinite linear;
    animation: cycle 15s 5s infinite linear;
}
.quote:nth-child(3) {
    -webkit-animation: cycle 15s 10s infinite linear;
    -moz-animation: cycle 15s 10s infinite linear;
    -o-animation: cycle 15s 10s infinite linear;
    animation: cycle 15s 10s infinite linear;
}
/*croass browser keyframe anitmation*/
 @keyframes cycle {
    0% {
        filter:...