JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.4.1/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.4.1/slick.min.js"></script>
<div data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "dots":true}'>
<img src="http://placehold.it/2520x720/ffa" width="1260" height="360"/>
<img src="http://placehold.it/2520x720/a4a" width="1260" height="360"/>
<img src="http://placehold.it/2520x720/66a" width="1260" height="360"/>
<img src="http://placehold.it/2520x720/22a" width="1260" height="360"/>
</div>

CSS

/* Uncomment the following line to fix the 1px issue */
.slick-slide { height: auto; }