JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bxslider.com/lib/plugins/jquery.easing.1.3.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<ul class="bxslider">
    <li>
        <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
        <div class="caption1"> 
            <span>Image 1</span>
            <div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
        </div></li>
   <li>
       <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
       <div class="caption1"> Image 2</div></li>
   <li>
        <img src="http://bxslider.com/images/730_200/houses.jpg" />  
        <div class="caption1"> Image 3</div></li>
    <li>
        <img src="http://bxslider.com/images/730_200/tree_root.jpg" />  
         <div class="caption1"> 
            <span>Image 4</span>
            <div class="caption2"><a id="img1a" href="#">Funky Roots</a></div>
        </div></li>
    <li>
        <img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
        <div class="caption1"> Image 5</div>
    </li>
    <li> 
        <img src="http://bxslider.com/images/730_200/trees.jpg" />
 <div class="caption1"> 
            <span>Image 6</span>
            <div class="caption2"><a id="img1a" href="#">Happy Trees</a></div>
        </div>
    </li>
</ul>

CSS

.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    border: solid #fff 5px;
    left: -5px;
    background: #fff;
}
.caption1{
    position:absolute;
    bottom:0px;
    left:0px;
    z-index:10;
    width: 100%;
   color:white;
    background: none repeat scroll 0% 0% rgba(80, 80, 80, 0.75);
    background-color: rgba(80, 80, 80, 0.75);
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
}
 a{
    font-size:28px;
}
a:hover{
    color: pink;
}

JavaScript

$('.bxslider').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
auto: true,
autoStart: true,
autoDirection: 'next',
autoHover: true,
pause: 3000,
autoControls: false,
pager: true,
pagerType: 'full',
controls: true,
captions: true,
speed: 500
});