Carousel Slider with React Splidejs + Tailwind CSS

ArrowIcon.tsx

import React from 'react'

function ArrowIcon() {
  return (
    <svg
      width="7"
      height="12"
      viewBox="0 0 7 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6.75229 6.36447C6.75229 6.16469 6.67582 5.96493 6.5232 5.81261L1.71823 1.01945C1.41257 0.714545 0.917005 0.714545 0.611473 1.01945C0.305941 1.32424 0.305941 1.81849 0.611473 2.12342L4.86318 6.36447L0.611622 10.6055C0.30609 10.9104 0.30609 11.4047 0.611622 11.7094C0.917154 12.0145 1.41272 12.0145 1.71838 11.7094L6.52335 6.91633C6.67599 6.76394 6.75229 6.56418 6.75229 6.36447Z"
        fill="#333539"
      />
    </svg>
  )
}

export default ArrowIcon

GroupCarousel.tsx

import React from 'react'
import { Splide, SplideSlide, SplideTrack } from '@splidejs/react-splide'
import ArrowIcon from './icons/ArrowIcon'
import '@splidejs/react-splide/css/core'


const carouselImages = [
  '/assets/img/slider1.png',
  '/assets/img/slider2.png',
  '/assets/img/slider3.png',
]

const options = {
  type: 'loop',
  perPage: 3,
  breakpoints: {
    1000: {
      perPage: 1,
    },
  },
  gap: '1rem',
}

function GroupCarousel() {
  return (
    <Splide hasTrack={false} options={options} aria-label="M Favorite Images">
      <SplideTrack>
        {carouselImages.map((image) => (
          <SplideSlide key={image}>
            <img src={image} className="w-full" />
          </SplideSlide>
        ))}
      </SplideTrack>
      {/*custom arrows*/}
      <div className="splide__arrows">
        <button className="splide__arrow splide__arrow--prev">
          <div className="absolute -left-3 top-1/2 -translate-y-8 bg-white grid place-items-center h-7 w-7 rounded-full drop-shadow rotate-180">
            <ArrowIcon />
          </div>
        </button>
        <button className="splide__arrow splide__arrow--next">
          <div className="absolute -right-3 top-1/2 -translate-y-8  bg-white grid place-items-center h-7 w-7 rounded-full drop-shadow">
            <ArrowIcon />
          </div>
        </button>
      </div>
    </Splide>
  )
}

export default GroupCarousel