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:nth-child(1):hover {
                -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...