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 666

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

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

9 months ago

1k
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Brandon D

4 years ago

33.5k
pile carde scroll
pile carde scroll

Omer fils ELENGA

9 months ago

649
Image carousel
Uses Flowbite

Anonymous

1 year ago

3.6k
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

9 months ago

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

dev cheick

2 years ago

4.6k
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

11 months ago

709
Simple Animated Carousel
A simple, animated 2:1 carousel with touch swipe support, based on perky98/Juraj's carousel.

Nick Girga

1 year ago

2k
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)

Juraj

1 year ago

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

Sherry Lynne

2 months ago

152
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

11 months ago

764
card section neon
card section neon

Omer fils ELENGA

8 months ago

1.3k