Gallery Component
A responsive gallery component designed in Material Design with an analogous color scheme for a dashboard purpose.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description for image 1.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description for image 2.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description for image 3.</p>
</div>
</div>
<!-- Repeat more images as needed -->
</div>
<div class="mt-6">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">User Avatars</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar 1" class="rounded-full">
</div>
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar 2" class="rounded-full">
</div>
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar 3" class="rounded-full">
</div>
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar 4" class="rounded-full">
</div>
<!-- Repeat more avatars as needed -->
</div>
</div>
</div>Related Components
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.
3D_Muted_Gallery_Component
A complex, responsive gallery component with a 3D design aesthetic, muted color scheme, and dark mode support, suitable for a blog or content consumption.
Gallery Component
A responsive gallery component using Tailwind CSS with Skeuomorphism design, Pastel color scheme, and moderate complexity for social media purposes. Includes dark mode support and uses picsum.photos for images and randomuser.me for avatars.