<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<!-- Header -->
<header class="bg-indigo-600 text-white py-4">
<div class="container mx-auto text-center">
<h1 class="text-3xl font-bold">Gallery</h1>
<p class="mt-2">Explore our collection of images</p>
</div>
</header>
<!-- Gallery Section -->
<main class="py-10">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Gallery Item 1 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold">Image Title 1</h3>
<p class="mt-2 text-gray-600">Short description of the image.</p>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold">Image Title 2</h3>
<p class="mt-2 text-gray-600">Short description of the image.</p>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold">Image Title 3</h3>
<p class="mt-2 text-gray-600">Short description of the image.</p>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold">Image Title 4</h3>
<p class="mt-2 text-gray-600">Short description of the image.</p>
</div>
</div>
<!-- Add more gallery items as needed -->
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-indigo-600 text-white py-4">
<div class="container mx-auto text-center">
<p>© 2024 Gallery. All rights reserved.</p>
<p>Designed by Your Name.</p>
</div>
</footer>
</body>
</html>