Home
Nick Girga
Image Card

Image Card

An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

This tailwind example is contributed by Nick Girga, on 28-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card Button

Author Nick Girga

754

Fork Fullscreen

<a class="group max-w-xl relative overflow-hidden rounded-[20px] m-4"
  href="https://unsplash.com/photos/aerial-view-of-green-trees-and-blue-sea-during-daytime-x-HCoTDGgZw"
  target="_blank"
  rel="noreferrer noopener">
  
  <img class="ease-in-out duration-500 scale-[100%] group-hover:scale-[110%]"
    src="https://images.unsplash.com/photo-1587974136998-4fcc253b6183?q=80&w=1710&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Example Image" />
  
  <div class="w-full h-full absolute bottom-0 left-0 right-0 top-0 rounded-[20px] bg-black/25 ease-in-out duration-300 opacity-0 group-hover:opacity-100">
    
    <h1 class="text-2xl sm:text-4xl font-bold text-white absolute bottom-[42px] sm:bottom-[48px] left-[24px]">
      Title
    </h1>
    
    <h2 class="text-md sm:text-xl font-bold text-white absolute bottom-[24px] left-[24px] opacity-75">
      Description
    </h2>
  </div>
</div>

Related Examples

IMDB score and votes box

Author:
Darius G

2 years ago

8.5k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

2 years ago

10.5k
Travel Landing Page: Australia

Author:
Maxim

8 months ago

1.8k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

7 months ago

807
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

6 months ago

1k
less is more
less is more by salvator

Author:
Baraka Salvator

5 months ago

835
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 months ago

154
gradient button

Author:
Akram Khan

1 year ago

1.9k
Tailwind card

Author:
Conan Hilton

2 years ago

13.3k
App Store Button

Author:
Arya

3 years ago

10.1k
Info card

Author:
Samuel Dawson

2 years ago

10k
Features
A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

Author:
SAURAV SINGH

4 months ago

282

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components