JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.3.15/slick.min.js"></script>
<div class="container">
    <div id="carousel" class="carousel">
        <div class="kwh-hotel-slider__slide slick-slide" index="0">

                    <img src="http://placehold.it/341x480" alt="">

                </div><div class="kwh-hotel-slider__slide slick-slide slick-active slick-center" index="1">

                    <img src="http://placehold.it/720x480" alt="">

                </div><div class="kwh-hotel-slider__slide slick-slide" index="2">

                    <img src="http://placehold.it/002-720x480" alt="">

                </div><div class="kwh-hotel-slider__slide slick-slide" index="3">

                    <img src="http://placehold.it/004-720x480" alt="">

                </div><div class="kwh-hotel-slider__slide slick-slide" index="4">

                    <img src="http://placehold.it/720x480" alt="">

                </div><div class="kwh-hotel-slider__slide slick-slide" index="5">

                    <img src="http://placehold.it/720x480" alt="">

                </div><div class="kwh-hotel-slider__slide slick-slide" index="6">

                    <img src="http://placehold.it/720x480.jpg" alt="">

                </div>
    </div>
</div>

CSS

.container { width: 100%; }

.container:before, .container:after {
display: table;
content: " ";
}

.kwh-hotel-slider__slide img {
height: 480px;
}

.carousel {
height: 480px;
list-style: none;
margin: 0;
position: relative;
overflow: hidden;
width: auto;
}

.kwh-hotel-slider__slide {
  border:1px solid red;

border-width: 0 1px;
position: relative;
float: left;
height: 100%;
min-height: 1px;
}

JavaScript

$('#carousel').slick({
    infinite: true,
    speed: 300,
    centerMode: true,
    variableWidth: true
});