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

835

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.8k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

2 years ago

10.8k
Travel Landing Page: Australia

Author:
Maxim

1 year ago

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

11 months ago

1.1k
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

10 months ago

1.3k
less is more
less is more by salvator

Author:
Baraka Salvator

9 months ago

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

Author:
Indra

6 months ago

477
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

2 months ago

228
404 Error card
Error card at the center

Author:
Shakti

3 years ago

9.7k
Card
Card

Author:
Aman kumar

1 year ago

2.6k
SCROLL ABAJO
para poner que a llegado al final de la pagina

Author:
Raul antonio de la cruz hernandez

7 months ago

965
card

Author:
Raul antonio de la cruz hernandez

2 months ago

220

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components