Gallery Component
A retro vintage style gallery component with responsive effects and dark theme support.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Retro Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="rounded-lg overflow-hidden shadow">
<img src="https://picsum.photos/200/300?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
</div>
<div class="rounded-lg overflow-hidden shadow">
<img src="https://picsum.photos/200/300?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
</div>
<div class="rounded-lg overflow-hidden shadow">
<img src="https://picsum.photos/200/300?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
</div>
<div class="rounded-lg overflow-hidden shadow">
<img src="https://picsum.photos/200/300?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
</div>
<div class="rounded-lg overflow-hidden shadow">
<img src="https://picsum.photos/200/300?random=5" alt="Gallery Image 5" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
</div>
<div class="rounded-lg overflow-hidden shadow">
<img src="https://picsum.photos/200/300?random=6" alt="Gallery Image 6" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
</div>
<div class="rounded-lg overflow-hidden shadow">
<img src="https://picsum.photos/200/300?random=7" alt="Gallery Image 7" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
</div>
<div class="rounded-lg overflow-hidden shadow">
<img src="https://picsum.photos/200/300?random=8" alt="Gallery Image 8" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white { background-color: #1a202c; }
.text-gray-800 { color: #edf2f7; }
}
</style>
Related Components
Minimalist Sepia Image Gallery for Reservations
A minimalist and flat design image gallery component with warm sepia/brown tones, suitable for booking and reservation systems. It features responsive design and dark mode support.
Event_Gallery_Component
A responsive gallery component for event and conference websites, featuring jewel tones, color gradients, smooth transitions, and dark mode support. It showcases event highlights or speaker images in a visually engaging grid.
Gallery Component
A retro/vintage-inspired gallery component with a vibrant color scheme, moderate complexity, and responsive design with dark theme support. Designed for content consumption.