JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css">
<div class="customize" id="customize">
  <div>
    <img src="https://source.unsplash.com/collection/993239/600x400" alt="" width="600" height="400">
  </div>
  <div>
    <img src="https://source.unsplash.com/collection/1673600/600x400" alt="" width="600" height="400">
  </div>
  <div>
    <img src="https://source.unsplash.com/collection/1513994/600x400" alt="" width="600" height="400">
  </div>
  <div>
    <img src="https://source.unsplash.com/collection/502925/600x400" alt="" width="600" height="400">
  </div>
  <div>
    <img src="https://source.unsplash.com/collection/1891993/600x400" alt="" width="600" height="400">
  </div>
</div>
<div class="customize-tools">
  <ul class="thumbnails" id="customize-thumbnails">
    <li>
      <img src="https://source.unsplash.com/collection/993239/600x400" alt="" width="600" height="400">
    </li>
    <li>
      <img src="https://source.unsplash.com/collection/1673600/600x400" alt="" width="600" height="400">
    </li>
    <li>
      <img src="https://source.unsplash.com/collection/1513994/600x400" alt="" width="600" height="400">
    </li>
    <li>
      <img src="https://source.unsplash.com/collection/502925/600x400" alt="" width="600" height="400">
    </li>
    <li>
      <img src="https://source.unsplash.com/collection/1891993/600x400" alt="" width="600" height="400">
    </li>
  </ul>
</div>

CSS

.thumbnails {
  display: flex;
  list-style-type: none;
}

.thumbnails > li {
  width: 5rem;
  height: 5rem;
  margin-right: .4rem;
}

.thumbnails > li > img {
  width: 100%;
  height: 100%;
}

.tns-nav-active {
  border: 3px solid deepskyblue;
}

JavaScript

const slider = tns({
  container: '.customize',
  items: 1,
  navContainer: '#customize-thumbnails',
  navAsThumbnails: true
})