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 class="clear"></div>
    </div>
    <div class="clear"></div>
    <div id="slides">
        <ul>
            <li>
                <div class="quote-container">
                    <p class="quote-phrase"><span class="quote-marks">"</span>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>
                    <p class="quote-author">A Satisfied Customer</p>
                </div>
            </li>
            <li>
                <div class="quote-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    <p class="quote-phrase"><span class="quote-marks">"</span>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.&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>
                        </span>
                        </span>&nbsp;2<span class="quote-marks">"</span>
                    </p>
                    <p class="quote-author">A Second Satisfied Customer</p>
                </div>
            </li>
            <li>
                <div class="quote-container">
                    <p class="quote-phrase"><span class="quote-marks">"</span>DonorPro is so...

CSS

#carousel {
    width:60%;
    height:290px;
    margin:0 auto;
}
#slides {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 250px;
    border: 1px solid #ccc;
}
/* remove the list styles, width : item width * total items */
 #slides ul {
    position:relative;
    left:0;
    top:0;
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
}
/* width of the item, in this case I put 250x250x gif */
 #slides li {
    width:100%;
    height:250px;
    float:left;
}
#slides li .quote-container {
    width: 100%;
    display: block;
    float: none;
    padding: 0px 10px;
    margin-top: -45px;
}
/* Styling for prev and next buttons */
 #buttons {
    padding:0 0 5px 0;
    float:right;
}
#buttons a {
    display:block;
    width:31px;
    height:32px;
    text-indent:-999em;
    float:left;
    outline:0;
}
.clear {
    clear:both
}
.quote-phrase, .quote-author {
    text-align:center;
    font-family:sans-serif;
    font-style:italic;
    font-size:18px;
    padding:25px 25px 0px 25px;
    font-weight:300;
}
.quote-marks {
    font-size:20px;
    padding:3px;
}
.quote-author {
    padding:5px;
    font-style:normal;
    font-size:14px;
    color:#afafaf;
    font-weight:400;
}

JavaScript

$(document).ready(function () {
    //rotation speed and timer
    var speed = 8000;
    var run = setInterval(rotate, speed);

    //grab the width and calculate left value
    var item_width = $('#slides li').outerWidth();
    var left_value = item_width * (-1);

    //move the last item before first item, just in case user click prev button


    //set the default item to the correct position 
    $('#slides ul').css({
        'left': 0
    });
    //if user clicked on prev button
    $('#prev').click(function () {
        //get the right position            
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;
        //slide the item            
        $('#slides ul').animate({
            'left': left_indent
        }, 1500, function () {
            //move the last item and put it as first item                
            $('#slides li:first').before($('#slides li:last'));
            //set the default item to correct position
            $('#slides ul').css({
                'left': left_value
            });

        });
        //cancel the link behavior            
        return false;

    });
    //if user clicked on next button
    $('#next').click(function () {

        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;

        //slide the item
        $('#slides ul').animate({
            'left': left_indent
        }, 1500, function () {

            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));

            //set the default item to correct position
            $('#slides ul').css({
                'left': 0
            });

        });

        //cancel the link behavior
        return false;

    });

    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('#slides').hover(

    function () {
        clearInterval(run);
    },

    function () {
        run = setInterval(rotate,...