JSFiddle - React, Tailwind, and code Playground
by Ulrich Bangert
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<ul>
<li>
<a data-fancybox data-caption="Die Bildbeschreibung" href="https://webentwicklung.ulrichbangert.de/images/bild1.jpg"> <img src="https://webentwicklung.ulrichbangert.de/images/bild1.jpg">
</a>
<p>
Die Bildbeschreibung
</p>
</li>
</ul>
CSS
img {
width: 200px;
}