JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>
<div id="resources">
  <div class="resource">
    <svg viewBox="-1 -1 176 202">
      <path d="M 86.6 0 L 173.2 50 L 173.2 150 L 86.6 200 L 0 150 L 0 50 L 86.6 0" />
    </svg>
  </div>
  <div class="resource">
    <svg viewBox="-1 -1 176 202">
      <path d="M 86.6 0 L 173.2 50 L 173.2 150 L 86.6 200 L 0 150 L 0 50 L 86.6 0" />
    </svg>
  </div>
  <div class="resource">
    <svg viewBox="-1 -1 176 202">
      <path d="M 86.6 0 L 173.2 50 L 173.2 150 L 86.6 200 L 0 150 L 0 50 L 86.6 0" />
    </svg>
  </div>
  <div class="resource">
    <svg viewBox="-1 -1 176 202">
      <path d="M 86.6 0 L 173.2 50 L 173.2 150 L 86.6 200 L 0 150 L 0 50 L 86.6 0" />
    </svg>
  </div>
  <div class="resource">
    <svg viewBox="-1 -1 176 202">
      <path d="M 86.6 0 L 173.2 50 L 173.2 150 L 86.6 200 L 0 150 L 0 50 L 86.6 0" />
    </svg>
  </div>
</div>

SCSS

body {
  margin: 0;
  background: white;
}

.resource {
  width: 20%;
  display: inline-block;
  svg {
    width: 95%;
    height: 100%;
    path {
      fill: none;
      stroke: #f3f3f3;
      stroke-width: 1px;
    }
  }
  &.slick-current path {
    fill: #3AA5DA;
    stroke: #3AA5DA;
  }
  &:focus {
    outline: none;
  }
}

JavaScript

$('#resources').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
});