JSFiddle - React, Tailwind, and code Playground
HTML
<!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/ui@5.0/dist/fancybox/fancybox.css"
/>
<style>
html, body {
margin: 0;
padding: 0;
}
body {
padding: 2rem 1rem;
}
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: center;
background: rgba(0,0,0,0.5);
color: #fff;
margin-right: var(--fancybox-scrollbar-compensate, 0px);
}
</style>
</head>
<body>
<div id="navbar">
Hello
</div>
<div>
<a
data-fancybox="gallery"
data-src="https://lipsum.app/id/2/1024x768"
data-caption="Optional caption,<br />that can contain <em>HTML</em> 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>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper, justo eget vehicula vestibulum, enim enim suscipit lectus, et sagittis nibh risus vel metus. Quisque eu ornare ante, et gravida mauris. Vivamus massa justo, sagittis non viverra sed, sodales non nisi. Nunc semper, massa a aliquet dictum, enim nisi malesuada orci, et elementum lectus turpis et velit. Nam vel felis vitae tortor dignissim malesuada. Nam suscipit, justo eu elementum pulvinar, magna sem tempor ex, vitae iaculis tellus odio non nisl. Duis dolor orci, viverra ut finibus sed, aliquet vitae tortor. Proin sodales ipsum ac ipsum hendrerit tempus. Nunc nec nibh nibh. Aenean...