JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
          />
  </head>
  <body>
    <h1 class="mt-12 mb-8 px-6 text-center text-lg md:text-2xl font-semibold">
      Customize caption
    </h1>

    <div class="flex flex-wrap gap-5 justify-center max-w-5xl mx-auto px-6">
      <a data-fancybox="gallery" data-src="https://lipsum.app/id/60/1600x1200" data-caption="First caption">
        <img src="https://lipsum.app/id/60/200x150" />
      </a>
      <a data-fancybox="gallery" data-src="https://lipsum.app/id/61/1600x1200" data-caption="Second caption">
        <img src="https://lipsum.app/id/61/200x150" />
      </a>
      <a data-fancybox="gallery" data-src="https://lipsum.app/id/62/1600x1200" data-caption="Third caption">
        <img src="https://lipsum.app/id/62/200x150" />
      </a>
      <a data-fancybox="gallery" data-src="https://lipsum.app/id/63/1600x1200">
        <img src="https://lipsum.app/id/63/200x150" />
      </a>
      <a data-fancybox="gallery" data-src="https://lipsum.app/id/64/1600x1200">
        <img src="https://lipsum.app/id/64/200x150" />
      </a>
      <a data-fancybox="gallery" data-src="https://lipsum.app/id/65/1600x1200">
        <img class="rounded" src="https://lipsum.app/id/65/200x150" />
      </a>
      <a data-fancybox="gallery" data-src="https://lipsum.app/id/66/1600x1200">
        <img class="rounded" src="https://lipsum.app/id/66/200x150" />
      </a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
      Fancybox.bind('[data-fancybox]', {
        caption: (fancybox, slide) => {
          const caption = slide.caption || "";

          return `${slide.index + 1} / ${
         ...