JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache"> <!--Forces content not to cache-->
<meta http-equiv="Expires" content="-1"> <!--Forces content not to cache-->
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE"> <!--Forces content not to cache-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ePosters</title>



	
<!-- START Add FancyBox 5 CDN -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css"
/>
<!-- END Add FancyBox 5 CDN -->


<style type="text/css">
</style>
	
</head>

<body>

<div><a class="fancybox" href="https://eposterkiosk.com/2024/ectss/eposters/CP30.jpg"  data-fancybox>Poster1-JPG</a></div>
<br>
<div><a class="fancybox" href="http://eposterkiosk.com/2024/ectss/eposters/TP02.pdf" data-fancybox>Poster2-PDF</a></div>


	
	
<!-- Attach fancyBox when the document is loaded -->	
 <script>
      Fancybox.bind("[data-fancybox]", {
		  Toolbar: {
		  enabled: true,
		  },
      });    
 </script>


		
	

</body>
</html>