JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<html>
	
	<body>
			
		<div class="container">

			<div class="slider_block">
				
				<div class="slider1">

					<a data-fancybox="test1" href="https://www.lexgotham.com/test/images/im1.jpg">
							
						<img alt="" src="https://www.lexgotham.com/test/images/im1.jpg" />
								
					</a>

				</div>
				
				<div class="slider2">

					<a data-fancybox="test2" href="https://www.lexgotham.com/test/images/im2.jpg">
							
						<img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />
								
					</a>
						
				</div>
												
			</div>
			
		</div>

	</body>
	
</html>

CSS

img{width:50%;}

JavaScript

$(document).ready(function() {$('.slider_block').slick({});});