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

818

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

Author:
Mrunal Solkar

2 years ago

10.7k
Travel Landing Page: Australia

Author:
Maxim

10 months ago

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

9 months ago

944
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

8 months ago

1.2k
less is more
less is more by salvator

Author:
Baraka Salvator

7 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

5 months ago

404
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

1 month ago

136
Buttons set
buttons sets of, primary, outlined, text and link

Author:
Akram Khan

1 year ago

1.8k
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

Author:
Livia Flores

2 years ago

25.6k
Game changer
by salvator

Author:
Baraka Salvator

8 months ago

838
Minimal Info cards

Author:
Gopi Yadav

3 years ago

10.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components