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

187

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

omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

2 months ago

532
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

10 months ago

1.9k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

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

Author:
Nick Girga

10 months ago

1.3k
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

2 months ago

167
Image carousel
Uses Flowbite

Author:
Fagundo67

3 years ago

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

4 months ago

349
Simple Multi-Purpose Slider
This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content. I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

Author:
Hielke Brandsma

1 year ago

2.6k
Slider
Responsive slider

Author:
Abhiraj

1 year ago

2.6k
Testimonials

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

1.8k
responsive slider carousel
slider carousel

Author:
Abhiraj

1 year ago

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

4 months ago

504

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components