JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div id="slideshow" class="pics" style="position: relative; ">
    <div width="200" height="200" style=" position: absolute; left: 0px; opacity: 1; z-index: 8; height: 200px; width:200px; top: 200px; display: none; ">1</div><div width="200" height="200" style="position: absolute; left: 0px; opacity: 1; z-index: 8; height: 0px; top: 200px; display: none; ">2</div>
    <div width="200" height="200" style="position: absolute; left: 0px; opacity: 1; z-index: 8; height: 0px; top: 200px; display: none; ">3</div>
    <div width="200" height="200" style=" position: absolute; left: 0px; opacity: 1; z-index: 8; height: 0px; top: 200px; display: none; ">4</div>
    <div width="200" height="200" style="position: absolute; left: 0px; opacity: 1; z-index: 8; height:  200px; width:200px; top: 200px; display: none; ">5</div>
    <div width="200" height="200" style=" position: absolute; left: 0px; opacity: 1; z-index: 8; height: top: 200px; display: none; ">6</div>
    <div width="200" height="200" style=" position: absolute; left: 0px; opacity: 1; z-index: 8; height: 200px; width:200px; top: 200px; display: none; ">7</div><div width="200" height="200" style="position: absolute; left: 0px; opacity: 1; z-index: 8; height: 0px; top: 200px; display: none; ">8</div>
    <div width="200" height="200" style="position: absolute; left: 0px; opacity: 1; z-index: 8; height: 0px; top: 200px; display: none; ">9</div>
    <div width="200" height="200" style=" position: absolute; left: 0px; opacity: 1; z-index: 8; height: 0px; top: 200px; display: none; ">10</div>
    <div width="200" height="200" style="position: absolute; left: 0px; opacity: 1; z-index: 8; height:  200px; width:200px; top: 200px; display: none; ">11</div>
    <div width="200" height="200" style=" position: absolute; left: 0px; opacity: 1; z-index: 8; height: top: 200px; display: none; ">12</div>
    </div>

<ul id="menu" style="list-style:none">
    <li><a...

CSS

#slideshow{font-size:46px;}

JavaScript

$('#slideshow').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0,  
    pager:    '#menu',
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#menu li:eq(' + idx + ') a'; 
    }
});