Components Gallery Gallery Component

Gallery Component

A responsive gallery component designed in Material Design with an analogous color scheme for a dashboard purpose.

Preview

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

Neumorphism Gallery Component

A responsive Neumorphic gallery component with dark mode support. Images are placeholders from picsum.photos and avatars from randomuser.me.

Open

Luxury Gallery Component

An elegant and sophisticated gallery component designed for music and audio platforms, featuring warm neutrals, responsive layouts, and dark mode support.

Open

3D Gallery Component

A complex responsive 3D gallery component designed for e-commerce, featuring a dark theme and a complementary color scheme.

Open