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')
    .on('afterChange init', function(event, slick, direction){
        console.log('afterChange/init', event, slick, slick.$slides);
        // remove all prev/next
        slick.$slides.removeClass('prevdiv').removeClass('nextdiv');
        for (var i = 0; i < slick.$slides.length; i++)
        {
            var $slide = $(slick.$slides[i]);
            if ($slide.hasClass('slick-current')) {
                $slide.prev().addClass('prevdiv');
                $slide.next().addClass('nextdiv');
                break;
            }
        }
      }
    )
    .on('beforeChange', function(event, slick) {
        // optional, but cleaner maybe
        // remove all prev/next
        slick.$slides.removeClass('prevdiv').removeClass('nextdiv');
    })
	.slick({
      centerMode: true,
      centerPadding: '27%',
      focusOnSelect: true,
      slidesToShow: 1,
      arrows: false,
    });