Home
Reuben Enahoro
Image cards

Image cards

This tailwind example is contributed by Reuben Enahoro, on 25-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Masonry, Image grid

Card Image gallery

Author Reuben Enahoro

1.9k

Fork Fullscreen

<section class=" flex flex-col gap-10 w-full justify-center">
  <h1 class='text-2xl text-center font-sans uppercase font-bold text-gray-700'>Image Cards</h1>
  <p class="text-center">Each of the cards have texts decsriptions, which get displayed when you hover the images. Just some dummy texts.</p>
  <section class=" flex flex-wrap gap-10 w-full justify-center items-center ">
    <div class="relative group w-80">
                <span class="flex flex-col justify-center items-center">
                    <img
                        src="https://cdn.pixabay.com/photo/2020/02/23/15/09/woman-4873600_960_720.jpg"
                        alt="Sample"
                        class="w-full h-full object-cover rounded-lg"
                    />
                    <h1 class="-mt-16 text-xl font-bol bg-black opacity-75 w-full py-5 text-center">HOVER THE IMAGE ONE</h1>
                </span>
                <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300 p-5 text-center font-sans">
                    <h2 class="text-xl font-sans font-bold text-gray-100">JUST BEFORE TAKE-OFF</h2>
                    <p class="text-gray-50 text-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit autem quaerat explicabo, voluptatum, assumenda placeat reiciendis aliquid itaque voluptates facere odit laboriosam, exercitationem aperiam labore dolorem quasi quia minima. Fugiat maxime, molestias molestiae aliquid animi quas voluptas natus sequi iusto atque placeat, suscipit, voluptatem laborum libero sit fuga deserunt accusamus!</p>
                </div>
    </div>
    <div class="relative group w-80 ">
                <span class="flex flex-col justify-center items-center">
                    <img
                        src="https://cdn.pixabay.com/photo/2020/09/20/16/27/model-5587623_960_720.jpg"
                        alt="Sample"
                        class="w-full h-full object-cover rounded-lg"
                    />
                    <h1 class="-mt-10 text-xl font-bol bg-black w-full py-2 text-center">HOVER THE IMAGE TWO</h1>
                </span>
                <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300 p-5 text-center font-sans">
                    <h2 class="text-xl font-sans font-bold text-gray-100">JUST BEFORE TAKE-OFF</h2>
                    <p class="text-gray-50 text-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit autem quaerat explicabo, voluptatum, assumenda placeat reiciendis aliquid itaque voluptates facere odit laboriosam, exercitationem aperiam labore dolorem quasi quia minima. Fugiat maxime, molestias molestiae aliquid animi quas voluptas natus sequi iusto atque placeat, suscipit, voluptatem laborum libero sit fuga deserunt accusamus!</p>
                </div>
    </div>
    <div class="relative group w-80">
                <span class="flex flex-col justify-center items-center">
                    <img
                        src="https://cdn.pixabay.com/photo/2019/12/10/13/31/woman-4685862_960_720.jpg"
                        alt="Sample"
                        class="w-full h-full object-cover rounded-lg"
                    />
                    <h1 class="-mt-10 text-xl font-bol bg-black w-full py-2 text-center">HOVER THE IMAGE THREE</h1>
                </span>
                <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300 p-5 text-center font-sans">
                    <h2 class="text-xl font-sans font-bold text-gray-100">JUST BEFORE TAKE-OFF</h2>
                    <p class="text-gray-50 text-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit autem quaerat explicabo, voluptatum, assumenda placeat reiciendis aliquid itaque voluptates facere odit laboriosam, exercitationem aperiam labore dolorem quasi quia minima. Fugiat maxime, molestias molestiae aliquid animi quas voluptas natus sequi iusto atque placeat, suscipit, voluptatem laborum libero sit fuga deserunt accusamus!</p>
                </div>
    </div>
  </section>
</section>

Related Examples

Animated cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

11.8k
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

5.3k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

11 months ago

2k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

3.8k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.5k
Issue card
card designed to display the details of a technical issue

Author:
ABDO-SY

10 months ago

2.1k
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

11.6k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

4.3k
Beautiful Info card
Info card with info type section on the corner.

Author:
TailwindFlex

3 years ago

10.2k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

3 years ago

63.9k
E-commerce cards
E-commerce responsive cards with dark mode

Author:
Robert Chunga

1 year ago

2.3k
Simple Profile Card.
Profile page with basic informations

Author:
Sedat Kumcu

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components