JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick-theme.css">
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/css/style.css">
<section id="features" class="blue">
    <div class="slider center">
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
        <div><h3>4</h3></div>
        <div><h3>5</h3></div>
        <div><h3>6</h3></div>
    </div>
</section>

CSS

.prevdiv h3 {
    background: red;
}

.nextdiv h3 {
    background: black;
}

JavaScript

$('.center').slick({
  centerMode: true,
  centerPadding: '27%',
  focusOnSelect: true,
  slidesToShow: 1,
  arrows: false
});

$(".slick-active").prev().addClass('prevdiv');
$(".slick-active").next().addClass('nextdiv');