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

card section neon
card section neon

Omer fils ELENGA

7 months ago

1.3k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

ishimwe shadad

1 year ago

2.3k
Galerie Interactive
Galerie Interactive

Omer fils ELENGA

8 months ago

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

Nick Girga

1 year ago

1.9k
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

8 months ago

632
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

815
Our services
Component: Interactive Services Carousel Overview: A card-based carousel built with HTML5 and Tailwind CSS, powered by Vanilla JavaScript. It displays Adeoar's 6 main services with a responsive layout and smooth transitions. Technical Features: Responsive: Displays 3 columns on desktop (md breakpoint) and 1 column on mobile devices. Dependencies: Tailwind CSS (CDN or compiled) + Native JavaScript (no external libraries like Swiper or Slick required). Icons: Inline SVG icons (Heroicons style). Functionalities: Navigation: Side buttons (prev/next) and bottom pagination (indicator dots). Automation: Autoplay runs every 4 seconds (infinite loop logic). Interaction: Autoplay pauses automatically on mouse hover (mouseenter/mouseleave). Style & Design (UX/UI): Default State: White background, soft shadows, pastel-colored icon backgrounds. Hover State (Active): Zoom Effect: The card scales up (scale-105). Color Inversion: Background changes to Navy Blue (bg-blue-900) and text turns white for high contrast. Details: The icon background turns white, and the icon stroke takes the dark blue color.

Juan D. Cortorreal

10 months ago

1.2k
Carousel

Juraj

1 year ago

3.2k
omerlinkStream
omerlinkStream

Omer fils ELENGA

8 months ago

1.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)

Salah eldein

10 months ago

756
Hero Slider with Alpine.js
This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

Juraj

1 year ago

2.8k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

230