grid masoneri

This tailwind example is contributed by Omer fils ELENGA, on 08-Jan-2026. Component is made with Tailwind v3.4. It is responsive.

Carousel

Author Omer fils ELENGA

Tailwind v3.4 567

Fork Fullscreen

<div class="columns-1 sm:columns-2 md:columns-3 xl:columns-4 gap-6 space-y-6 mx-auto max-w-7xl">

<div class="break-inside-avoid relative bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-xl hover:shadow-violet-500/20 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
            
            
            <div class="absolute top-3 right-3 z-10 bg-violet-600/90 backdrop-blur-sm text-white text-xs font-bold px-2 py-1 rounded-md shadow-lg">
                24
            </div>

<div class="p-5">
                <a href="#">
                    <h5 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Card
                    </h5>
                </a>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    A beautiful card component with smooth animations and modern styling.
                </p>
            </div>
        </div>

<div class="break-inside-avoid relative bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-xl hover:shadow-violet-500/20 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
            <div class="absolute top-3 right-3 z-10 bg-violet-600/90 backdrop-blur-sm text-white text-xs font-bold px-2 py-1 rounded-md shadow-lg">
                19
            </div>

<div class="p-5">
                <a href="#">
                    <h5 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Input
                    </h5>
                </a>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    Interactive form inputs styled with Tailwind CSS for a clean look.
                </p>
            </div>
        </div>

<div class="break-inside-avoid relative bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-xl hover:shadow-violet-500/20 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
            <div class="absolute top-3 right-3 z-10 bg-violet-600/90 backdrop-blur-sm text-white text-xs font-bold px-2 py-1 rounded-md shadow-lg">
                18
            </div>

<div class="p-5">
                <a href="#">
                    <h5 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Button
                    </h5>
                </a>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    Various button styles to fit any design system requirement.
                </p>
            </div>
        </div>

<div class="break-inside-avoid relative bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-xl hover:shadow-violet-500/20 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
            <div class="absolute top-3 right-3 z-10 bg-violet-600/90 backdrop-blur-sm text-white text-xs font-bold px-2 py-1 rounded-md shadow-lg">
                15
            </div>

<div class="p-5">
                <a href="#">
                    <h5 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Form
                    </h5>
                </a>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    Complete login and registration forms ready to use.
                </p>
            </div>
        </div>

<div class="break-inside-avoid relative bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-xl hover:shadow-violet-500/20 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
            <div class="absolute top-3 right-3 z-10 bg-violet-600/90 backdrop-blur-sm text-white text-xs font-bold px-2 py-1 rounded-md shadow-lg">
                10
            </div>

<div class="p-5">
                <a href="#">
                    <h5 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Alert
                    </h5>
                </a>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    User-friendly notification messages for success or errors.
                </p>
            </div>
        </div>

<div class="break-inside-avoid relative bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-xl hover:shadow-violet-500/20 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
            <div class="absolute top-3 right-3 z-10 bg-violet-600/90 backdrop-blur-sm text-white text-xs font-bold px-2 py-1 rounded-md shadow-lg">
                9
            </div>

<div class="p-5">
                <a href="#">
                    <h5 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Gradient
                    </h5>
                </a>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    Beautiful CSS gradients to make your background pop.
                </p>
            </div>
        </div>

<div class="break-inside-avoid relative bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-xl hover:shadow-violet-500/20 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
            <div class="absolute top-3 right-3 z-10 bg-violet-600/90 backdrop-blur-sm text-white text-xs font-bold px-2 py-1 rounded-md shadow-lg">
                8
            </div>

<div class="p-5">
                <a href="#">
                    <h5 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Badge
                    </h5>
                </a>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    Small status indicators and labels.
                </p>
            </div>
        </div>

<div class="break-inside-avoid relative bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-xl hover:shadow-violet-500/20 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
            <div class="absolute top-3 right-3 z-10 bg-violet-600/90 backdrop-blur-sm text-white text-xs font-bold px-2 py-1 rounded-md shadow-lg">
                7
            </div>

<div class="p-5">
                <a href="#">
                    <h5 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Button Group
                    </h5>
                </a>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    Grouped buttons for actions or pagination controls.
                </p>
            </div>
        </div>

<div class="break-inside-avoid relative bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-xl hover:shadow-violet-500/20 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
            <div class="absolute top-3 right-3 z-10 bg-violet-600/90 backdrop-blur-sm text-white text-xs font-bold px-2 py-1 rounded-md shadow-lg">
                7
            </div>

<div class="p-5">
                <a href="#">
                    <h5 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Feature
                    </h5>
                </a>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    Highlight key features of your product or service.
                </p>
            </div>
        </div>

<div class="break-inside-avoid relative bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-xl hover:shadow-violet-500/20 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
            <div class="absolute top-3 right-3 z-10 bg-violet-600/90 backdrop-blur-sm text-white text-xs font-bold px-2 py-1 rounded-md shadow-lg">
                6
            </div>

<div class="p-5">
                <a href="#">
                    <h5 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Call to Action
                    </h5>
                </a>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    Engaging sections to drive user conversions.
                </p>
            </div>
        </div>

<div class="break-inside-avoid relative bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-xl hover:shadow-violet-500/20 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
            <div class="absolute top-3 right-3 z-10 bg-violet-600/90 backdrop-blur-sm text-white text-xs font-bold px-2 py-1 rounded-md shadow-lg">
                6
            </div>

<div class="p-5">
                <a href="#">
                    <h5 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Grid
                    </h5>
                </a>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                        Organized layouts for content display.
                </p>
            </div>
        </div>

<div class="break-inside-avoid relative bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-xl hover:shadow-violet-500/20 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
            <div class="absolute top-3 right-3 z-10 bg-violet-600/90 backdrop-blur-sm text-white text-xs font-bold px-2 py-1 rounded-md shadow-lg">
                6
            </div>

<div class="p-5">
                <a href="#">
                    <h5 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
                        Login
                    </h5>
                </a>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                        Secure and stylish authentication pages.
                </p>
            </div>
        </div>

</div>

Related Examples

Carousel

Crimson

1 year ago

8.3k
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Omer fils ELENGA

8 months ago

814
Nice and simple carousel
Nice and simple carousel, fully responsive.

dev cheick

2 years ago

4.5k
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

8 months ago

632
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.9k
Responsive Image Carousel with Alpine.js
This component is a fully responsive image carousel/slider that displays: 1 slide at a time on mobile devices (screen width < 768px) 3 slides at a time on desktop (screen width ≥ 768px)

Salah eldein

10 months ago

522
responsive slider carousel
slider carousel

Abhiraj

1 year ago

3.1k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

ORGIN_DREAMS

1 year ago

2k
Image Gallery Displayed in a Carousel
Trying to pick one scheme that displays on a varienty of background colors.

Sherry Lynne

1 month ago

150
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

594
Image carousel
Uses Flowbite

Anonymous

1 year ago

3.6k
omerlinkStream
omerlinkStream

Omer fils ELENGA

8 months ago

1.2k