Home
TailwindFlex
Responsive card grid

Responsive card grid

This tailwind example is contributed by TailwindFlex, on 03-Oct-2022. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Grid

Author TailwindFlex

8.6k

Fork Fullscreen

<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 p-3 md:p-4 xl:p-5 dark:bg-gray-900">
    <div class="bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 ">
        <div class="p-2 flex justify-center">
            <a href="https://tailwindflex.com/team-tailwindflex/simple-search-bar">
                <img class="rounded-lg"
                    src="https://tailwindflex.com/public/images/thumbnails/simple-search-bar/thumb_u.min.webp"
                    alt="Simple Search Bar" loading="lazy">
            </a>
        </div>
        <div class="px-4 pb-3">
            <div>
                <a href="https://tailwindflex.com/team-tailwindflex/simple-search-bar">
                    <h5
                        class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                        Simple Search Bar
                    </h5>
                </a>
                <p class="text-gray-600 dark:text-gray-400 text-sm break-all">Minimalist design</p>
            </div>
            <div class="mt-2 flex justify-between">
                <div class="flex gap-3 py-2">
                    <a href="/u/team-tailwindflex">
                        <img src="https://tailwindflex.com/public/images/profile/1.png"
                            class="object-cover w-12 h-12 rounded-full" alt="team-tailwindflex" loading="lazy">
                    </a>
                    <p class="text-gray-600 dark:text-gray-300 hover:text-violet-800 ">
                        <a href="/u/team-tailwindflex" class="text-sm">
                            <small>Author:</small> <br>
                            TailwindFlex
                        </a>
                    </p>
                </div>
                <div class="flex items-center mt-2.5">
                    <span class="text-sm dark:text-gray-400">Ratings</span>
                    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
                        5.0
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 ">
        <div class="p-2 flex justify-center">
            <a href="https://tailwindflex.com/team-tailwindflex/responsive-navbar-with-dark-mode-support">
                <img class="rounded-lg"
                    src="https://tailwindflex.com/public/images/thumbnails/responsive-navbar-with-dark-mode-support/canvas.min.webp"
                    alt="Responsive navbar with dark mode support" loading="lazy">
            </a>
        </div>
        <div class="px-4 pb-3">
            <div>
                <a href="https://tailwindflex.com/team-tailwindflex/responsive-navbar-with-dark-mode-support">
                    <h5
                        class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                        Responsive navbar with dark mode support
                    </h5>
                </a>
                <p class="text-gray-600 dark:text-gray-400 text-sm break-all">Sidebar on small screen devices</p>
            </div>
            <div class="mt-2 flex justify-between">
                <div class="flex gap-3 py-2">
                    <a href="/u/team-tailwindflex">
                        <img src="https://tailwindflex.com/public/images/profile/1.png"
                            class="object-cover w-12 h-12 rounded-full" alt="team-tailwindflex" loading="lazy">
                    </a>
                    <p class="text-gray-600 dark:text-gray-300 hover:text-violet-800 ">
                        <a href="/u/team-tailwindflex" class="text-sm">
                            <small>Author:</small> <br>
                            TailwindFlex
                        </a>
                    </p>
                </div>
                <div class="flex items-center mt-2.5">
                    <span class="text-sm dark:text-gray-400">Ratings</span>
                    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
                        5.0
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 ">
        <div class="p-2 flex justify-center">
            <a href="https://tailwindflex.com/team-tailwindflex/profile-form">
                <img class="rounded-lg"
                    src="https://tailwindflex.com/public/images/thumbnails/profile-form/thumb_u.min.webp"
                    alt="Profile Form" loading="lazy">
            </a>
        </div>
        <div class="px-4 pb-3">
            <div>
                <a href="https://tailwindflex.com/team-tailwindflex/profile-form">
                    <h5
                        class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                        Profile Form
                    </h5>
                </a>
                <p class="text-gray-600 dark:text-gray-400 text-sm break-all">Profile form for taking user inputs
                </p>
            </div>
            <div class="mt-2 flex justify-between">
                <div class="flex gap-3 py-2">
                    <a href="/u/team-tailwindflex">
                        <img src="https://tailwindflex.com/public/images/profile/1.png"
                            class="object-cover w-12 h-12 rounded-full" alt="team-tailwindflex" loading="lazy">
                    </a>
                    <p class="text-gray-600 dark:text-gray-300 hover:text-violet-800 ">
                        <a href="/u/team-tailwindflex" class="text-sm">
                            <small>Author:</small> <br>
                            TailwindFlex
                        </a>
                    </p>
                </div>
                <div class="flex items-center mt-2.5">
                    <span class="text-sm dark:text-gray-400">Ratings</span>
                    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
                        5.0
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 ">
        <div class="p-2 flex justify-center">
            <a href="https://tailwindflex.com/team-tailwindflex/heading-with-left-border">
                <img class="rounded-lg"
                    src="https://tailwindflex.com/public/images/thumbnails/heading-with-left-border/thumb_u.min.webp"
                    alt="Heading with left border" loading="lazy">
            </a>
        </div>
        <div class="px-4 pb-3">
            <div>
                <a href="https://tailwindflex.com/team-tailwindflex/heading-with-left-border">
                    <h5
                        class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                        Heading with left border
                    </h5>
                </a>
            </div>
            <div class="mt-2 flex justify-between">
                <div class="flex gap-3 py-2">
                    <a href="/u/team-tailwindflex">
                        <img src="https://tailwindflex.com/public/images/profile/1.png"
                            class="object-cover w-12 h-12 rounded-full" alt="team-tailwindflex" loading="lazy">
                    </a>
                    <p class="text-gray-600 dark:text-gray-300 hover:text-violet-800 ">
                        <a href="/u/team-tailwindflex" class="text-sm">
                            <small>Author:</small> <br>
                            TailwindFlex
                        </a>
                    </p>
                </div>
                <div class="flex items-center mt-2.5">
                    <span class="text-sm dark:text-gray-400">Ratings</span>
                    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
                        5.0
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 ">
        <div class="p-2 flex justify-center">
            <a href="https://tailwindflex.com/team-tailwindflex/full-width-header-with-gradient">
                <img class="rounded-lg"
                    src="https://tailwindflex.com/public/images/thumbnails/full-width-header-with-gradient/thumb_u.min.webp"
                    alt="Full width header with gradient." loading="lazy">
            </a>
        </div>
        <div class="px-4 pb-3">
            <div>
                <a href="https://tailwindflex.com/team-tailwindflex/full-width-header-with-gradient">
                    <h5
                        class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                        Full width header with gradient.
                    </h5>
                </a>
                <p class="text-gray-600 dark:text-gray-400 text-sm break-all">Header component for showing Info.</p>
            </div>
            <div class="mt-2 flex justify-between">
                <div class="flex gap-3 py-2">
                    <a href="/u/team-tailwindflex">
                        <img src="https://tailwindflex.com/public/images/profile/1.png"
                            class="object-cover w-12 h-12 rounded-full" alt="team-tailwindflex" loading="lazy">
                    </a>
                    <p class="text-gray-600 dark:text-gray-300 hover:text-violet-800 ">
                        <a href="/u/team-tailwindflex" class="text-sm">
                            <small>Author:</small> <br>
                            TailwindFlex
                        </a>
                    </p>
                </div>
                <div class="flex items-center mt-2.5">
                    <span class="text-sm dark:text-gray-400">Ratings</span>
                    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
                        5.0
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 ">
        <div class="p-2 flex justify-center">
            <a href="https://tailwindflex.com/team-tailwindflex/tagbutton-cloud">
                <img class="rounded-lg"
                    src="https://tailwindflex.com/public/images/thumbnails/tagbutton-cloud/thumb_u.min.webp"
                    alt="Tag/Button Cloud" loading="lazy">
            </a>
        </div>
        <div class="px-4 pb-3">
            <div>
                <a href="https://tailwindflex.com/team-tailwindflex/tagbutton-cloud">
                    <h5
                        class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                        Tag/Button Cloud
                    </h5>
                </a>
                <p class="text-gray-600 dark:text-gray-400 text-sm break-all">Responsive tag cloud. Created with
                    FlexBox</p>
            </div>
            <div class="mt-2 flex justify-between">
                <div class="flex gap-3 py-2">
                    <a href="/u/team-tailwindflex">
                        <img src="https://tailwindflex.com/public/images/profile/1.png"
                            class="object-cover w-12 h-12 rounded-full" alt="team-tailwindflex" loading="lazy">
                    </a>
                    <p class="text-gray-600 dark:text-gray-300 hover:text-violet-800 ">
                        <a href="/u/team-tailwindflex" class="text-sm">
                            <small>Author:</small> <br>
                            TailwindFlex
                        </a>
                    </p>
                </div>
                <div class="flex items-center mt-2.5">
                    <span class="text-sm dark:text-gray-400">Ratings</span>
                    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
                        5.0
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 ">
        <div class="p-2 flex justify-center">
            <a href="https://tailwindflex.com/team-tailwindflex/button-group">
                <img class="rounded-lg"
                    src="https://tailwindflex.com/public/images/thumbnails/button-group/thumb_u.min.webp"
                    alt="Button Group" loading="lazy">
            </a>
        </div>
        <div class="px-4 pb-3">
            <div>
                <a href="https://tailwindflex.com/team-tailwindflex/button-group">
                    <h5
                        class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                        Button Group
                    </h5>
                </a>
                <p class="text-gray-600 dark:text-gray-400 text-sm break-all">Add class to clicked Element using
                    JavaScript</p>
            </div>
            <div class="mt-2 flex justify-between">
                <div class="flex gap-3 py-2">
                    <a href="/u/team-tailwindflex">
                        <img src="https://tailwindflex.com/public/images/profile/1.png"
                            class="object-cover w-12 h-12 rounded-full" alt="team-tailwindflex" loading="lazy">
                    </a>
                    <p class="text-gray-600 dark:text-gray-300 hover:text-violet-800 ">
                        <a href="/u/team-tailwindflex" class="text-sm">
                            <small>Author:</small> <br>
                            TailwindFlex
                        </a>
                    </p>
                </div>
                <div class="flex items-center mt-2.5">
                    <span class="text-sm dark:text-gray-400">Ratings</span>
                    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
                        5.0
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 ">
        <div class="p-2 flex justify-center">
            <a href="https://tailwindflex.com/team-tailwindflex/404-error-page">
                <img class="rounded-lg"
                    src="https://tailwindflex.com/public/images/thumbnails/404-error-page/thumb_u.min.webp"
                    alt="404 Error Page" loading="lazy">
            </a>
        </div>
        <div class="px-4 pb-3">
            <div>
                <a href="https://tailwindflex.com/team-tailwindflex/404-error-page">
                    <h5
                        class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                        404 Error Page
                    </h5>
                </a>
                <p class="text-gray-600 dark:text-gray-400 text-sm break-all">Minimal 404 for your project</p>
            </div>
            <div class="mt-2 flex justify-between">
                <div class="flex gap-3 py-2">
                    <a href="/u/team-tailwindflex">
                        <img src="https://tailwindflex.com/public/images/profile/1.png"
                            class="object-cover w-12 h-12 rounded-full" alt="team-tailwindflex" loading="lazy">
                    </a>
                    <p class="text-gray-600 dark:text-gray-300 hover:text-violet-800 ">
                        <a href="/u/team-tailwindflex" class="text-sm">
                            <small>Author:</small> <br>
                            TailwindFlex
                        </a>
                    </p>
                </div>
                <div class="flex items-center mt-2.5">
                    <span class="text-sm dark:text-gray-400">Ratings</span>
                    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
                        5.0
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 ">
        <div class="p-2 flex justify-center">
            <a href="https://tailwindflex.com/team-tailwindflex/hero-header-with-search-button">
                <img class="rounded-lg"
                    src="https://tailwindflex.com/public/images/thumbnails/hero-header-with-search-button/thumb_u.min.webp"
                    alt="Hero Header with search button" loading="lazy">
            </a>
        </div>
        <div class="px-4 pb-3">
            <div>
                <a href="https://tailwindflex.com/team-tailwindflex/hero-header-with-search-button">
                    <h5
                        class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                        Hero Header with search button
                    </h5>
                </a>
            </div>
            <div class="mt-2 flex justify-between">
                <div class="flex gap-3 py-2">
                    <a href="/u/team-tailwindflex">
                        <img src="https://tailwindflex.com/public/images/profile/1.png"
                            class="object-cover w-12 h-12 rounded-full" alt="team-tailwindflex" loading="lazy">
                    </a>
                    <p class="text-gray-600 dark:text-gray-300 hover:text-violet-800 ">
                        <a href="/u/team-tailwindflex" class="text-sm">
                            <small>Author:</small> <br>
                            TailwindFlex
                        </a>
                    </p>
                </div>
                <div class="flex items-center mt-2.5">
                    <span class="text-sm dark:text-gray-400">Ratings</span>
                    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
                        5.0
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 ">
        <div class="p-2 flex justify-center">
            <a href="https://tailwindflex.com/team-tailwindflex/alert-mono-color">
                <img class="rounded-lg"
                    src="https://tailwindflex.com/public/images/thumbnails/alert-mono-color/thumb_u.min.webp"
                    alt="Alert mono color" loading="lazy">
            </a>
        </div>
        <div class="px-4 pb-3">
            <div>
                <a href="https://tailwindflex.com/team-tailwindflex/alert-mono-color">
                    <h5
                        class="text-xl font-semibold tracking-tight hover:text-violet-800 dark:hover:text-violet-300 text-gray-900 dark:text-white ">
                        Alert mono color
                    </h5>
                </a>
                <p class="text-gray-600 dark:text-gray-400 text-sm break-all">Dismissible alert card.</p>
            </div>
            <div class="mt-2 flex justify-between">
                <div class="flex gap-3 py-2">
                    <a href="/u/team-tailwindflex">
                        <img src="https://tailwindflex.com/public/images/profile/1.png"
                            class="object-cover w-12 h-12 rounded-full" alt="team-tailwindflex" loading="lazy">
                    </a>
                    <p class="text-gray-600 dark:text-gray-300 hover:text-violet-800 ">
                        <a href="/u/team-tailwindflex" class="text-sm">
                            <small>Author:</small> <br>
                            TailwindFlex
                        </a>
                    </p>
                </div>
                <div class="flex items-center mt-2.5">
                    <span class="text-sm dark:text-gray-400">Ratings</span>
                    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
                        5.0
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

15k
Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

2 years ago

37k
Tailwind products list

Author:
Isabella Kowalski

1 year ago

11.3k
Tailwind product gallery

Author:
JaxStone

1 year ago

23.1k
Card grid

Author:
Leon Bachmann

1 year ago

10.5k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

44.6k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Author:
Alok

1 year ago

49.5k
Posts / Articles card grid
Present a collection of articles or blog posts in a grid format with their respective featured images

Author:
Prajwal Hallale

1 year ago

5k
Bento grids

Author:
Maxim

10 months ago

14.3k
Simple search bar

Author:
TailwindFlex

2 years ago

10.4k
404 Error Page
Minimal 404 for your project

Author:
TailwindFlex

2 years ago

18.5k
Heading with left border

Author:
TailwindFlex

2 years ago

12k
Alert mono color
minimal alerts design

Author:
TailwindFlex

2 years ago

9.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components