JSFiddle - React, Tailwind, and code Playground

by silb3r

HTML

<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<div class="slider">
  <div>
    <div class="polaroid">
      <img src="https://unsplash.it/200/300" />
      <div class="custom-nav"></div>
      <p>Text goes here</p>
    </div>
  </div>
  <div>
    <div class="polaroid">
      <img src="https://unsplash.it/200/310" />
      <div class="custom-nav"></div>
      <p>Text goes here</p>
    </div>
  </div>
</div>

CSS

.custom-nav {
    width: 200px;
}
.slick-prev, .slick-next {
    position: static;
    color: #000;
    opacity: 1;
    margin: 0;
    line-height: 1;
    border: 1px solid red;
}
.slick-prev {
    float: left;
    left: 0;
}
.slick-prev:before {
    content: '';
}
.slick-next {
    float: right;
    right: 0;
}
.slick-next:before {
    content: '';
}

JavaScript

$('.slider').slick({
    appendArrows: '.custom-nav'
});