JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://eurobytes.eu/styling.css">
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css" />
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>
  </head>

  <body>
    <div class="container">
      <a data-fancybox="gallery" data-src="https://lipsum.app/id/2/1024x768" data-caption="Optional caption,&lt;br /&gt;that can contain &lt;em&gt;HTML&lt;/em&gt; code">
        <img src="https://lipsum.app/id/2/200x150" />
      </a>

      <a data-fancybox="gallery" data-src="https://lipsum.app/id/3/1024x768">
        <img src="https://lipsum.app/id/3/200x150" />
      </a>

      <a data-fancybox="gallery" data-src="https://lipsum.app/id/4/1024x768">
        <img src="https://lipsum.app/id/4/200x150" />
      </a>
    </div>

    <div class="container">
      <a data-fancybox href="https://dev.eurobytes.eu/img/applications/Zammad/organization_profile/organization_profile.avif" title="Zammad Organization Profile" data-caption="Zammad Organization Profile" target="_blank" rel="fancybox">
        <picture>
          <source media="(min-width:1280px)" srcset="https://dev.eurobytes.eu/img/applications/Zammad/organization_profile/organization_profile-w800.avif" type="image/avif">
          <source media="(min-width:1024px)" srcset="https://dev.eurobytes.eu/img/applications/Zammad/organization_profile/organization_profile-w768.avif" type="image/avif">
          <source media="(min-width:720px)" srcset="https://dev.eurobytes.eu/img/applications/Zammad/organization_profile/organization_profile-w360.avif"...

CSS

.container {
  margin-top: 5%;
}