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">
<figure data-fancybox="gallery" data-src="https://lipsum.app/id/60/1600x1200">
<img src="https://lipsum.app/id/60/200x150" />
<figcaption>
<b>Lots</b> <u>of</u> <i>html</i> and
<figure data-src="https://fancyapps.com/">urls</figure>
</figcaption>
</figure>
<figure data-fancybox="gallery" data-src="https://lipsum.app/id/61/1600x1200">
<img src="https://lipsum.app/id/61/200x150" />
<figcaption>
Second image
</figcaption>
</figure>
<figure
data-fancybox="gallery"
data-src="https://lipsum.app/id/62/1600x1200"
>
<img src="https://lipsum.app/id/62/200x150" />
<figcaption>
Third image
</figcaption>
</figure>
<figure data-fancybox="gallery" data-src="https://lipsum.app/id/63/1600x1200">
<img src="https://lipsum.app/id/63/200x150" />
</figure>
<figure data-fancybox="gallery" data-src="https://lipsum.app/id/64/1600x1200">
<img src="https://lipsum.app/id/64/200x150" />
</figure>
<figure data-fancybox="gallery" data-src="https://lipsum.app/id/65/1600x1200">
<img class="rounded" src="https://lipsum.app/id/65/200x150" />
</figure>
<figure data-fancybox="gallery" data-src="https://lipsum.app/id/66/1600x1200">
<img class="rounded" src="https://lipsum.app/id/66/200x150" />
</figure>
...
CSS
figcaption {
display: none;
}