JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />
</head>

<body>
  <main>
    <div class="slider">
      <div><img class="slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img1.jpg" alt="スライドショー画像1"></div>
      <div><img class="slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img2.jpg" alt="スライドショー画像2"></div>
      <div><img class="slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img3.jpg" alt="スライドショー画像3"></div>
      <div><img class="slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img4.jpg" alt="スライドショー画像4"></div>
    </div>
    <div class="thumbnail-slider">
      <div><img class="thumbnail-slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img1.jpg" alt="スライドショー画像1"></div>
      <div><img class="thumbnail-slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img2.jpg" alt="スライドショー画像2"></div>
      <div><img class="thumbnail-slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img3.jpg" alt="スライドショー画像3"></div>
      <div><img class="thumbnail-slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img4.jpg" alt="スライドショー画像4"></div>
    </div>
  </main>
  <footer>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
  </footer>
</body>

SCSS

.slider,
 .thumbnail-slider {
   max-width: 480px;
 }

 .slider-img {
   width: 100%;
   height: 240px;
   object-fit: cover;
 }


 .thumbnail-slider-img {
   width: 100%;
   height: 60px;
   object-fit: cover;
   position: relative;
 }

 .slick-arrow {
   &.slick-prev {
     left: 10px;
     z-index: 1;
   }

   &.slick-next {
     right: 10px;
     z-index: 1;
   }
 }

JavaScript

$('.slider').slick({
  asNavFor: ".thumbnail-slider",
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
});
$('.thumbnail-slider').slick({
  slidesToShow: 4,
  asNavFor: ".slider",
  focusOnSelect: true,
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  centerMode: true,
  autoplay: true,
  autoplaySpeed: 4000,
  speed: 400,
});