Home
Omer fils ELENGA
grid masoneri

grid masoneri

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

Carousel

Author Omer fils ELENGA

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

Author:
Crimson

1 year ago

2.8k
Image Carousel

Author:
Nikolai

1 year ago

7k
Image carousel
Uses Flowbite

Author:
Fagundo67

2 years ago

31.2k
Carousel

Author:
Crimson

1 year ago

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

Author:
Salah eldein

2 months ago

153
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

7 months ago

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

Author:
Juraj

8 months ago

1.7k
responsive slider carousel
slider carousel

Author:
Abhiraj

1 year ago

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

Author:
Juraj

8 months ago

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

Author:
Salah eldein

2 months ago

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

Author:
dev cheick

1 year ago

3.9k
Carousel

Author:
Juraj

11 months ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components