JSFiddle - React, Tailwind, and code Playground

by Apple Ilagan

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-pager="#no-template-pager"
    data-cycle-pager-template=""
    data-cycle-slides="> div"
    >
    <div><img src="http://placehold.it/650x350/3f32fd/fff" width=650 height=350></div>
    <div><img src="http://placehold.it/650x350/113f11/fff" width=650 height=350></div>
    <div><img src="http://placehold.it/650x350/d3df3f/fff" width=650 height=350></div>
    <div><img src="http://placehold.it/650x350/d32e11/fff" width=650 height=350></div>
</div>
<div id=no-template-pager class="cycle-pager external">
    <!-- using thumbnail image files would be even better! -->
    <img src="http://placehold.it/80x80/3f32fd/fff" width=80 height=80>
    <img src="http://placehold.it/80x80/113f11/fff" width=80 height=80> 
    <img src="http://placehold.it/80x80/d3df3f/fff" width=80 height=80> 
    <img src="http://placehold.it/80x80/d32e11/fff" width=80 height=80>
</div>