JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
<div class="slideshow" 
data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-carousel-visible="3"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-pager="#pager">
        <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg" />
        <img src="http://jquery.malsup.com/cycle2/images/beach2.jpg" />
        <img src="http://jquery.malsup.com/cycle2/images/beach3.jpg" />
        <img src="http://jquery.malsup.com/cycle2/images/beach4.jpg" />
        <img src="http://jquery.malsup.com/cycle2/images/beach5.jpg" />
        <img src="http://jquery.malsup.com/cycle2/images/beach6.jpg" />
        <img src="http://jquery.malsup.com/cycle2/images/beach7.jpg" />
        <img src="http://jquery.malsup.com/cycle2/images/beach8.jpg" />
        <img src="http://jquery.malsup.com/cycle2/images/beach9.jpg" />
                                    
</div>
                                    
<div class="center">
    <a href="#" id="prev">&lt;&lt; Prev </a>
    <a href="#" id="next"> Next &gt;&gt; </a>
</div>
                                    
<div class="cycle-pager" id="pager"></div>
<script>
     $.fn.cycle.defaults.autoSelector = '.slideshow';
</script>

CSS

.center{
    width:150px;
    margin:0 auto;
}

.center a{
    text-align:center
}