JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="quotes">
    <div class="textItem">"People need dramatic examples to shake them out of apathy and I can't do that as Bruce Wayne, as a man I'm flesh and blood. I can be ignored. I can be destroyed, but as a symbol, I can be incorruptible. I can be everlasting."
        <div class="author">Bruce Wayne</div>
    </div>
    <div class="textItem">"You will give the people an ideal to strive towards. They will race behind you, they will stumble, they will fall. But in time, they will join you in the sun. In time, you will help them accomplish wonders."
        <div class="author">Jor-El</div>
    </div>
    <div class="textItem">"In brightest day, in blackest night, No evil shall escape my sight. Let those who worship evil's might, Beware my power, Green Lantern's light!"
        <div class="author">Green Lantern</div>
    </div>
    <div class="textItem">"When the world finds out what you can do, it's gonna change everything; our... our beliefs, our notions of what it means to be human... everything."
        <div class="author">Johnathan Kent</div>
    </div>
</div>

CSS

#quotes
			{
				margin:0;
				padding:10px;
				font-size:20px;
				position:relative;
                width: 400px;
				height: 200px;
				background-color: yellow;
			}
			.textItem
			{
				position:absolute;
				display:block;
				background-color:#B9ECCF;
				width: 400px;
			}
			a
			{
				color:#000;
				font-size:12px;
			}

JavaScript

var timer;
$(document).ready(function(){
    timer = function(){$('#quotes > :first-child').fadeOut().next('div').fadeIn().end().appendTo('#quotes');};
    $('#quotes .textItem:gt(0)').hide();
    var interval = setInterval(timer , 2000);
$('#quotes').hover(function (ev) {
    clearInterval(interval);
}, function (ev) {
    interval = setInterval(timer , 2000);
});
});