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

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

10.2k
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

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

6 months ago

1.2k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

2 years ago

18.2k
card
card section. find it makecomponents.com

Author:
makecomponents

10 months ago

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

Author:
Mike Varen

1 year ago

3.1k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

2 months ago

382
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.3k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

2 months ago

276
Info Card with image
An info card with an image, a short title, and a short description.

Author:
Arya

2 years ago

12.3k
Professional Plan
Professional Plan

Author:
Muzammil Riaz

1 month ago

72
Chats Screen in neomorphism

Author:
Akram Khan

11 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components