JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
<!-- jQuery Cycle 2 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.caption2.min.js"></script>

<!-- Slideshow -->
<div id="cycle2" class="cycle-slideshow" 
    data-cycle-fx=fade 
    data-cycle-speed=2500 
    data-cycle-timeout=3000 

    data-cycle-caption-plugin=caption2 
    data-cycle-overlay-fx-out="slideUp" 
    data-cycle-overlay-fx-in="slideDown" 
    data-cycle-overlay-template="<span>&bull; {{title}}</span><br>{{alt}}" 
    data-cycle-title-template="{{title}}" 
    data-cycle-desc-template="{{alt}}"
>
    <div class="cycle-overlay"></div>
    <div class="cycle-pager"></div>
</div>

CSS

#cycle2 {
    width: 100%;
}
.cycle-pager {
    top: 96%;
}
.cycle-overlay {
    color: #ffffff;
    /*opacity: 1.0;*/
    font-size: 0.85em;
}
.cycle-overlay span {
    font-weight: bold;
    opacity: .9;
}

JavaScript

var slideShow = [{
    "src": "http://www.firstchoicehousing.com/_img/home/banner/banner_15",
        "alt": "Some of our properties have a porch",
        "title": "Do you enjoy being outdoors?"
}, {
    "src": "http://www.firstchoicehousing.com/_img/home/banner/banner_16",
        "alt": "Many of our buildings feature supersize bedrooms",
        "title": "Bigger is better"
}, {
    "src": "http://www.firstchoicehousing.com/_img/home/banner/banner_17",
        "alt": "Many units have spacious living rooms",
        "title": "Just like home"
}, {
    "src": "http://www.firstchoicehousing.com/_img/home/banner/banner_18",
        "alt": "Enjoy the peace and quiet of your own place",
        "title": "Sit back and relax"
}, {
    "src": "http://www.firstchoicehousing.com/_img/home/banner/banner_19",
        "alt": "No longer have to worry about distance. Our units are a snap away from USC",
        "title": "Short commute"
}, {
    "src": "http://www.firstchoicehousing.com/_img/home/banner/banner_20",
        "alt": "Enjoy the choice and joy of cooking your own meals in your kitchen",
        "title": "Live healthy"
}, {
    "src": "http://www.firstchoicehousing.com/_img/home/banner/banner_21",
        "alt": "Remodeled kitchens and new appliances",
        "title": "Looking for the best your place"
}, {
    "src": "http://www.firstchoicehousing.com/_img/home/banner/banner_22",
        "alt": "Enjoy the perk of a huge HDTV at home (In selected units)",
        "title": "Big HDTV Available*"
}, {
    "src": "http://www.firstchoicehousing.com/_img/home/banner/banner_01",
        "alt": "Beautiful buildings",
        "title": "It's a beauty"
}, {
    "src": "http://www.firstchoicehousing.com/_img/home/banner/banner_02",
        "alt": "Most of our buildings have great outdoors",
        "title": "Don't like your current place?"
}, {
    "src": "http://www.firstchoicehousing.com/_img/home/banner/banner_03",
        "alt": "Spacious indoors",
        "title": "Need...