JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/site.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://malsup.github.com/min/jquery.cycle2.min.js"></script>
<script src="https://rawgithub.com/malsup/cycle2/master/jquery.cycle2.tile.js"></script>
<div class="my-wrapper">
    <div class="cycle-slideshow" data-cycle-fx="tileSlide" data-cycle-timeout=2000 data-cycle-caption-template="{{cycleTitle}}">
        <img src="http://jquery.malsup.com/cycle2/images/p1.jpg" data-cycle-title="Spring">
        <img src="http://jquery.malsup.com/cycle2/images/p2.jpg" data-cycle-title="Redwoods">
        <img src="http://jquery.malsup.com/cycle2/images/p3.jpg" data-cycle-title="Angle Island">
        <img src="http://jquery.malsup.com/cycle2/images/p4.jpg" data-cycle-title="Raquette Lake">
        <div class="cycle-caption"></div>            
    </div>
</div>

CSS

.my-wrapper {
    width: 700px;
    height: 500px;
    padding: 10px;
    margin: auto;
}
.cycle-slideshow {
    width: 100%;
    margin-top: 100px;
    overflow: visible !important;
}
.cycle-caption {
    background: rgba(0,0,0,.5);
    font-size: 70px;
    height: 0;
    line-height: 0;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    overflow:visible;
}