Home
Anonymous
Tailwind image grid

Tailwind image grid

tailwind picture grid

This tailwind example is contributed by Anonymous, on 29-Nov-2023. Component is made with Tailwind CSS v3. It is responsive.

Card Grid

Author Anonymous

7.7k

Fork Fullscreen

<div class="relative overflow-hidden bg-white">
    <div class="pt-16 pb-80 sm:pt-24 sm:pb-40 lg:pt-40 lg:pb-48">
      <div class="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
        <div class="sm:max-w-lg">
          <h1 class="font text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Svelte signals are finally here</h1>
          <p class="mt-4 text-xl text-gray-500">This year, our new svelte signals will shelter you from the harsh
             elements of a world that doesn't care if you develop or die.</p>
        </div>
        <div>
          <div class="mt-10">
            
            <div aria-hidden="true" class="pointer-events-none lg:absolute lg:inset-y-0 lg:mx-auto lg:w-full lg:max-w-7xl">
              <div class="absolute transform sm:left-1/2 sm:top-0 sm:translate-x-8 lg:left-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-8">
                <div class="flex items-center space-x-6 lg:space-x-8">
                  <div class="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
                    <div class="h-64 w-44 overflow-hidden rounded-lg sm:opacity-0 lg:opacity-100">
                      <img src="https://placekitten.com/g/200/300" class="h-full w-full object-cover object-center">
                    </div>
                    <div class="h-64 w-44 overflow-hidden rounded-lg">
                      <img src="https://placekeanu.com/200/300" alt="" class="h-full w-full object-cover object-center">
                    </div>
                  </div>
                  <div class="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
                    <div class="h-64 w-44 overflow-hidden rounded-lg">
                      <img src="https://placekeanu.com/684/350/" alt="" class="h-full w-full object-cover object-center">
                    </div>
                    <div class="h-64 w-44 overflow-hidden rounded-lg">
                      <img src="https://placekeanu.com/250/350/y" alt="" class="h-full w-full object-cover object-center">
                    </div>
                    <div class="h-64 w-44 overflow-hidden rounded-lg">
                      <img src="https://placekitten.com/g/200/300" alt="" class="h-full w-full object-cover object-center">
                    </div>
                  </div>
                  <div class="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
                    <div class="h-64 w-44 overflow-hidden rounded-lg">
                      <img src="https://placekeanu.com/684/350/y" alt="" class="h-full w-full object-cover object-center">
                    </div>
                    <div class="h-64 w-44 overflow-hidden rounded-lg">
                      <img src="https://placebear.com/684/350" alt="" class="h-full w-full object-cover object-center">
                    </div>
                  </div>
                </div>
              </div>
            </div>

<a href="#" class="inline-block rounded-md border border-transparent bg-indigo-600 py-3 px-8 text-center font-medium text-white hover:bg-indigo-700">Svelte Signals</a>
          </div>
        </div>
      </div>
    </div>
  </div>

Related Examples

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
Masonry Grid
Auto-adjusting masonry grid

Author:
Simon Scheffer

1 year ago

27.1k
Bento grids

Author:
Maxim

10 months ago

14.3k
Tailwind image card with text above it

Author:
I.P. Leroy

1 year ago

19.4k
Responsive Article Section

Author:
Prashant

2 years ago

13k
Card grid section
Display article/blog grid

Author:
Mr Robot

1 year ago

22.1k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

1 year ago

15.9k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

1 year ago

19.6k
Card grid for posts

Author:
Mr Robot

1 year ago

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

Author:
Noob

2 years ago

19.2k
Responsive Grid with Featured image

Author:
_Amar_

2 years ago

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

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components