Grid

Grid Grid-Cards

This tailwind example is contributed by sardorazimov2901, on 16-Jun-2024. Component is made with Tailwind v3.4. It is responsive.

Card Banner Grid

Author sardorazimov2901

Tailwind v3.4 2.4k 10

Fork Fullscreen

<div>
      <div>
            <div class='p-1 '>
                <ul class='grid grid-cols-1 gap-8 px-1 md:grid-cols-2 
         lg:grid-cols-3 md:p-2 xl:p-4'>
                    <li class='relative flex w-full gap-4 p-2 border border-gray-700 rounded hover:transition shadow-md hover:border-fuchsia-800 hover:shadow-fuchsia-600'>
                        <div class='absolute flex justify-center gap-1 w-10 text-xl font-bold 
                 text-center text-green-800 -top-2 -left-2'>
                            <span class='self-end text-gray-800 text-sm'>
                                1
                            </span>
                        </div>
                        <Link href={'/'} class='w-full overflow-hidden rounded'>
                            <img src="https://github.com/sardorazimov/e_commerce/blob/master/public/users/opa.png?raw=true" alt="Opa" class='object-cover my-auto rounded w-28 h-28' />
                        </Link>
                        <div class='flex flex-col justify-between flex-grow gap03 px-2'>
                            <div class='w-full'>
                                <Link href={'/'} class='font-semibold md:text-xl text-black'>
                                    Halle Nalle
                                </Link>
                                <p class='pt-1 text-sm text-black '>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class='flex items-center justify-between gap-1'>
                                <div class='text-sm text-gray-700'>
                                    lorem
                                </div>
                                <div class='flex items-center gap-1 px-2 py-1 text-gra-700 rounded cursor-pointer'>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                                    </svg>
                                    <span>
                                        Lorem Opa
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class='relative flex w-full gap-4 p-2 border border-gray-700 rounded hover:transition shadow-md hover:border-fuchsia-800 hover:shadow-fuchsia-600'>
                        <div class='absolute flex justify-center gap-1 w-10 text-xl font-bold 
                 text-center text-green-800 -top-2 -left-2'>
                            <span class='self-end text-gray-800 text-sm'>
                                1
                            </span>
                        </div>
                        <Link href={'/'} class='w-full overflow-hidden rounded'>
                            <img src="https://github.com/sardorazimov/e_commerce/blob/master/public/users/opa.png?raw=true" alt="Opa" class='object-cover my-auto rounded w-28 h-28' />
                        </Link>
                        <div class='flex flex-col justify-between flex-grow gap03 px-2'>
                            <div class='w-full'>
                                <Link href={'/'} class='font-semibold md:text-xl text-black'>
                                    Halle Nalle
                                </Link>
                                <p class='pt-1 text-sm text-black '>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class='flex items-center justify-between gap-1'>
                                <div class='text-sm text-gray-700'>
                                    lorem
                                </div>
                                <div class='flex items-center gap-1 px-2 py-1 text-gra-700 rounded cursor-pointer'>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                                    </svg>
                                    <span>
                                        Lorem Opa
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class='relative flex w-full gap-4 p-2 border border-gray-700 rounded hover:transition shadow-md hover:border-fuchsia-800 hover:shadow-fuchsia-600'>
                        <div class='absolute flex justify-center gap-1 w-10 text-xl font-bold 
                 text-center text-green-800 -top-2 -left-2'>
                            <span class='self-end text-gray-800 text-sm'>
                                1
                            </span>
                        </div>
                        <Link href={'/'} class='w-full overflow-hidden rounded'>
                            <img src="https://github.com/sardorazimov/e_commerce/blob/master/public/users/opa.png?raw=true" alt="Opa" class='object-cover my-auto rounded w-28 h-28' />
                        </Link>
                        <div class='flex flex-col justify-between flex-grow gap03 px-2'>
                            <div class='w-full'>
                                <Link href={'/'} class='font-semibold md:text-xl text-black'>
                                    Halle Nalle
                                </Link>
                                <p class='pt-1 text-sm text-black '>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class='flex items-center justify-between gap-1'>
                                <div class='text-sm text-gray-700'>
                                    lorem
                                </div>
                                <div class='flex items-center gap-1 px-2 py-1 text-gra-700 rounded cursor-pointer'>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                                    </svg>
                                    <span>
                                        Lorem Opa
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class='relative flex w-full gap-4 p-2 border border-gray-700 rounded hover:transition shadow-md hover:border-fuchsia-800 hover:shadow-fuchsia-600'>
                        <div class='absolute flex justify-center gap-1 w-10 text-xl font-bold 
                 text-center text-green-800 -top-2 -left-2'>
                            <span class='self-end text-gray-800 text-sm'>
                                1
                            </span>
                        </div>
                        <Link href={'/'} class='w-full overflow-hidden rounded'>
                            <img src="https://github.com/sardorazimov/e_commerce/blob/master/public/users/opa.png?raw=true" alt="Opa" class='object-cover my-auto rounded w-28 h-28' />
                        </Link>
                        <div class='flex flex-col justify-between flex-grow gap03 px-2'>
                            <div class='w-full'>
                                <Link href={'/'} class='font-semibold md:text-xl text-black'>
                                    Halle Nalle
                                </Link>
                                <p class='pt-1 text-sm text-black '>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class='flex items-center justify-between gap-1'>
                                <div class='text-sm text-gray-700'>
                                    lorem
                                </div>
                                <div class='flex items-center gap-1 px-2 py-1 text-gra-700 rounded cursor-pointer'>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                                    </svg>
                                    <span>
                                        Lorem Opa
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class='relative flex w-full gap-4 p-2 border border-gray-700 rounded hover:transition shadow-md hover:border-fuchsia-800 hover:shadow-fuchsia-600'>
                        <div class='absolute flex justify-center gap-1 w-10 text-xl font-bold 
                 text-center text-green-800 -top-2 -left-2'>
                            <span class='self-end text-gray-800 text-sm'>
                                1
                            </span>
                        </div>
                        <Link href={'/'} class='w-full overflow-hidden rounded'>
                            <img src="https://github.com/sardorazimov/e_commerce/blob/master/public/users/opa.png?raw=true" alt="Opa" class='object-cover my-auto rounded w-28 h-28' />
                        </Link>
                        <div class='flex flex-col justify-between flex-grow gap03 px-2'>
                            <div class='w-full'>
                                <Link href={'/'} class='font-semibold md:text-xl text-black'>
                                    Halle Nalle
                                </Link>
                                <p class='pt-1 text-sm text-black '>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class='flex items-center justify-between gap-1'>
                                <div class='text-sm text-gray-700'>
                                    lorem
                                </div>
                                <div class='flex items-center gap-1 px-2 py-1 text-gra-700 rounded cursor-pointer'>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                                    </svg>
                                    <span>
                                        Lorem Opa
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class='relative flex w-full gap-4 p-2 border border-gray-700 rounded hover:transition shadow-md hover:border-fuchsia-800 hover:shadow-fuchsia-600'>
                        <div class='absolute flex justify-center gap-1 w-10 text-xl font-bold 
                 text-center text-green-800 -top-2 -left-2'>
                            <span class='self-end text-gray-800 text-sm'>
                                1
                            </span>
                        </div>
                        <Link href={'/'} class='w-full overflow-hidden rounded'>
                            <img src="https://github.com/sardorazimov/e_commerce/blob/master/public/users/opa.png?raw=true" alt="Opa" class='object-cover my-auto rounded w-28 h-28' />
                        </Link>
                        <div class='flex flex-col justify-between flex-grow gap03 px-2'>
                            <div class='w-full'>
                                <Link href={'/'} class='font-semibold md:text-xl text-black'>
                                    Halle Nalle
                                </Link>
                                <p class='pt-1 text-sm text-black '>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class='flex items-center justify-between gap-1'>
                                <div class='text-sm text-gray-700'>
                                    lorem
                                </div>
                                <div class='flex items-center gap-1 px-2 py-1 text-gra-700 rounded cursor-pointer'>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                                    </svg>
                                    <span>
                                        Lorem Opa
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class='relative flex w-full gap-4 p-2 border border-gray-700 rounded hover:transition shadow-md hover:border-fuchsia-800 hover:shadow-fuchsia-600'>
                        <div class='absolute flex justify-center gap-1 w-10 text-xl font-bold 
                 text-center text-green-800 -top-2 -left-2'>
                            <span class='self-end text-gray-800 text-sm'>
                                1
                            </span>
                        </div>
                        <Link href={'/'} class='w-full overflow-hidden rounded'>
                            <img src="https://github.com/sardorazimov/e_commerce/blob/master/public/users/opa.png?raw=true" alt="Opa" class='object-cover my-auto rounded w-28 h-28' />
                        </Link>
                        <div class='flex flex-col justify-between flex-grow gap03 px-2'>
                            <div class='w-full'>
                                <Link href={'/'} class='font-semibold md:text-xl text-black'>
                                    Halle Nalle
                                </Link>
                                <p class='pt-1 text-sm text-black '>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class='flex items-center justify-between gap-1'>
                                <div class='text-sm text-gray-700'>
                                    lorem
                                </div>
                                <div class='flex items-center gap-1 px-2 py-1 text-gra-700 rounded cursor-pointer'>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                                    </svg>
                                    <span>
                                        Lorem Opa
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class='relative flex w-full gap-4 p-2 border border-gray-700 rounded hover:transition shadow-md hover:border-fuchsia-800 hover:shadow-fuchsia-600'>
                        <div class='absolute flex justify-center gap-1 w-10 text-xl font-bold 
                 text-center text-green-800 -top-2 -left-2'>
                            <span class='self-end text-gray-800 text-sm'>
                                1
                            </span>
                        </div>
                        <Link href={'/'} class='w-full overflow-hidden rounded'>
                            <img src="https://github.com/sardorazimov/e_commerce/blob/master/public/users/opa.png?raw=true" alt="Opa" class='object-cover my-auto rounded w-28 h-28' />
                        </Link>
                        <div class='flex flex-col justify-between flex-grow gap03 px-2'>
                            <div class='w-full'>
                                <Link href={'/'} class='font-semibold md:text-xl text-black'>
                                    Halle Nalle
                                </Link>
                                <p class='pt-1 text-sm text-black '>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class='flex items-center justify-between gap-1'>
                                <div class='text-sm text-gray-700'>
                                    lorem
                                </div>
                                <div class='flex items-center gap-1 px-2 py-1 text-gra-700 rounded cursor-pointer'>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                                    </svg>
                                    <span>
                                        Lorem Opa
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class='relative flex w-full gap-4 p-2 border border-gray-700 rounded hover:transition shadow-md hover:border-fuchsia-800 hover:shadow-fuchsia-600'>
                        <div class='absolute flex justify-center gap-1 w-10 text-xl font-bold 
                 text-center text-green-800 -top-2 -left-2'>
                            <span class='self-end text-gray-800 text-sm'>
                                1
                            </span>
                        </div>
                        <Link href={'/'} class='w-full overflow-hidden rounded'>
                            <img src="https://github.com/sardorazimov/e_commerce/blob/master/public/users/opa.png?raw=true" alt="Opa" class='object-cover my-auto rounded w-28 h-28' />
                        </Link>
                        <div class='flex flex-col justify-between flex-grow gap03 px-2'>
                            <div class='w-full'>
                                <Link href={'/'} class='font-semibold md:text-xl text-black'>
                                    Halle Nalle
                                </Link>
                                <p class='pt-1 text-sm text-black '>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class='flex items-center justify-between gap-1'>
                                <div class='text-sm text-gray-700'>
                                    lorem
                                </div>
                                <div class='flex items-center gap-1 px-2 py-1 text-gra-700 rounded cursor-pointer'>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                                    </svg>
                                    <span>
                                        Lorem Opa
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class='relative flex w-full gap-4 p-2 border border-gray-700 rounded hover:transition shadow-md hover:border-fuchsia-800 hover:shadow-fuchsia-600'>
                        <div class='absolute flex justify-center gap-1 w-10 text-xl font-bold 
                 text-center text-green-800 -top-2 -left-2'>
                            <span class='self-end text-gray-800 text-sm'>
                                1
                            </span>
                        </div>
                        <Link href={'/'} class='w-full overflow-hidden rounded'>
                            <img src="https://github.com/sardorazimov/e_commerce/blob/master/public/users/opa.png?raw=true" alt="Opa" class='object-cover my-auto rounded w-28 h-28' />
                        </Link>
                        <div class='flex flex-col justify-between flex-grow gap03 px-2'>
                            <div class='w-full'>
                                <Link href={'/'} class='font-semibold md:text-xl text-black'>
                                    Halle Nalle
                                </Link>
                                <p class='pt-1 text-sm text-black '>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class='flex items-center justify-between gap-1'>
                                <div class='text-sm text-gray-700'>
                                    lorem
                                </div>
                                <div class='flex items-center gap-1 px-2 py-1 text-gra-700 rounded cursor-pointer'>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                                    </svg>
                                    <span>
                                        Lorem Opa
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class='relative flex w-full gap-4 p-2 border border-gray-700 rounded hover:transition shadow-md hover:border-fuchsia-800 hover:shadow-fuchsia-600'>
                        <div class='absolute flex justify-center gap-1 w-10 text-xl font-bold 
                 text-center text-green-800 -top-2 -left-2'>
                            <span class='self-end text-gray-800 text-sm'>
                                1
                            </span>
                        </div>
                        <Link href={'/'} class='w-full overflow-hidden rounded'>
                            <img src="https://github.com/sardorazimov/e_commerce/blob/master/public/users/opa.png?raw=true" alt="Opa" class='object-cover my-auto rounded w-28 h-28' />
                        </Link>
                        <div class='flex flex-col justify-between flex-grow gap03 px-2'>
                            <div class='w-full'>
                                <Link href={'/'} class='font-semibold md:text-xl text-black'>
                                    Halle Nalle
                                </Link>
                                <p class='pt-1 text-sm text-black '>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class='flex items-center justify-between gap-1'>
                                <div class='text-sm text-gray-700'>
                                    lorem
                                </div>
                                <div class='flex items-center gap-1 px-2 py-1 text-gra-700 rounded cursor-pointer'>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                                    </svg>
                                    <span>
                                        Lorem Opa
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class='relative flex w-full gap-4 p-2 border border-gray-700 rounded hover:transition shadow-md hover:border-fuchsia-800 hover:shadow-fuchsia-600'>
                        <div class='absolute flex justify-center gap-1 w-10 text-xl font-bold 
                 text-center text-green-800 -top-2 -left-2'>
                            <span class='self-end text-gray-800 text-sm'>
                                1
                            </span>
                        </div>
                        <Link href={'/'} class='w-full overflow-hidden rounded'>
                            <img src="https://github.com/sardorazimov/e_commerce/blob/master/public/users/opa.png?raw=true" alt="Opa" class='object-cover my-auto rounded w-28 h-28' />
                        </Link>
                        <div class='flex flex-col justify-between flex-grow gap03 px-2'>
                            <div class='w-full'>
                                <Link href={'/'} class='font-semibold md:text-xl text-black'>
                                    Halle Nalle
                                </Link>
                                <p class='pt-1 text-sm text-black '>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class='flex items-center justify-between gap-1'>
                                <div class='text-sm text-gray-700'>
                                    lorem
                                </div>
                                <div class='flex items-center gap-1 px-2 py-1 text-gra-700 rounded cursor-pointer'>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                                    </svg>
                                    <span>
                                        Lorem Opa
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
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.

Amit Pachange

4 years ago

53.6k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Responsive Article Section

Prashant

4 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Features grid

Sophia Baker

3 years ago

10.7k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.1k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k