JSFiddle - React, Tailwind, and code Playground

HTML

<div id="carousel">
    <div id="buttons"><a id="prev" href="#">prev</a><a id="next" href="#">next</a> &nbsp; &nbsp; &nbsp; &nbsp;</div>
    <div id="slides">
        <ul>
            <li class="slide">
                <div class="quoteContainer">
                    <p class="quote-phrase"><span class="quote-marks">"</span>1 DonorPro is so very Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem. <span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.&nbsp;<span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.&nbsp;<span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.</span></span><span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.&nbsp;<span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.&nbsp;</span>
</span>&nbsp;1<span class="quote-marks">"</span>

                    </p>
                </div>
                <div class="authorContainer">
                    <p class="quote-author">A Satisfied Customer 1</p>
                </div>
            </li>
            <li class="slide">
                <div class="quoteContainer">
                    <p class="quote-phrase"><span class="quote-marks">"</span>2 DonorPro is so very Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem. <span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.&nbsp;<span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.&nbsp;<span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.</span></span>
                        </span>&nbsp;1<span class="quote-marks">"</span>

                    </p>
                </div>
                <div class="authorContainer">
                    <p class="quote-author">A Satisfied Customer 2</p>
                </div>
            </li>
            <li class="slide">
                <div class="quoteContainer">
                    <p class="quote-phrase"><span class="quote-marks">"</span>3 DonorPro is so very Lorem Ipsum Dolor...

CSS

#carousel {
    position: relative;
    width:60%;
    margin:0 auto;
}
#slides {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 250px;
    border: 1px solid #ccc;
}
#slides ul {
    list-style: none;
    width:100%;
    height:250px;
    margin: 0;
    padding: 0;
    position: relative;
}
/* width of the item, in this case I put 250x250x gif */
 #slides li {
    width:100%;
    height:250px;
    float:left;
    text-align: center;
    position: relative;

}
/* Styling for prev and next buttons */
 #buttons {
    padding:0 0 5px 0;
    float:right;
}
#buttons a {
    display:block;
    width:31px;
    height:32px;
    float:left;
    outline:0;
}
a#prev {
    background:url(arrow.gif) 0 -31px no-repeat;
}
a#prev:hover {
    background:url(arrow.gif) 0 0 no-repeat;
}
a#next {
    background:url(arrow.gif) -32px -31px no-repeat;
}
a#next:hover {
    background:url(arrow.gif) -32px 0 no-repeat;
}
.quote-phrase, .quote-author {
    font-family:sans-serif;
    font-weight:300;
    display: table-cell;
    vertical-align: middle;
    padding: 5px 20px;
}
.quote-phrase {
    height: 200px;
    font-size:16px;
    font-style:italic;
}
.quote-marks {
    font-size:20px;
    padding:3px;
}
.quote-author {
    font-style:normal;
    font-size:14px;
    color:#afafaf;
    font-weight:400;
    height: 30px;
}
.quoteContainer, .authorContainer {
    display: table;
    width: 100%;
}

JavaScript

$(document).ready(function () {
    //rotation speed and timer
    var speed = 5000;
    
    var run = setInterval(rotate, speed);
    var slides = $('.slide');
    var container = $('#slides ul');
    var elm = container.find(':first-child').prop("tagName");
    var item_width = container.width();
    var previous = 'prev'; //id of previous button
    var next = 'next'; //id of next button
    slides.width(item_width); //set the slides to the correct pixel width
    container.parent().width(item_width);
    container.width(slides.length * item_width); //set the slides container to the correct total width
    container.find(elm + ':first').before(container.find(elm + ':last'));
    resetSlides();
    
    
    //if user clicked on prev button
    
    $('#buttons a').click(function (e) {
        //slide the item
        
        if (container.is(':animated')) {
            return false;
        }
        if (e.target.id == previous) {
            container.stop().animate({
                'left': 0
            }, 1500, function () {
                container.find(elm + ':first').before(container.find(elm + ':last'));
                resetSlides();
            });
        }
        
        if (e.target.id == next) {
            container.stop().animate({
                'left': item_width * -2
            }, 1500, function () {
                container.find(elm + ':last').after(container.find(elm + ':first'));
                resetSlides();
            });
        }
        
        //cancel the link behavior            
        return false;
        
    });
    
    //if mouse hover, pause the auto rotation, otherwise rotate it    
    container.parent().mouseenter(function () {
        clearInterval(run);
    }).mouseleave(function () {
        run = setInterval(rotate, speed);
    });
    
    
    function resetSlides() {
        //and adjust the container so current is in the frame
        container.css({
            'left': -1 * item_width
        });
  ...