JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<div class="slider">
    <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100" />
    </div>
    <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100" />
    </div>
    <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100" />
    </div>
    <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100" />
    </div>
    <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100" />
    </div>
    <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100" />
    </div>
</div>

CSS

body {
          background-color: #fff;
      }
      .slider {
          margin: 60px auto;
          width: 500px;
      }
      div {
          height: 100%;
      }
      p {
          text-align: center;
          font-size: 12px;
          color: white;
      }

/* added the following to give the background color of the arrows as red for visibility, the default which can be found in the slick-theme.css was white */

.slick-prev:before, .slick-next:before{
    color:red;
}

JavaScript

$(document).ready(function () {
    $('.slider').slick({
        centerMode: true,
        centerPadding: '60px',
        dots: true, /* Just changed this to get the bottom dots navigation */
        infinite: true,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 1,
        arrows: true
    });
});