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

314

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

Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
Anonymous

1 year ago

12.1k
Chats Message Screen in neomorphism
light/dark chat screen

Author:
Akram Khan

11 months ago

1.8k
Responsive Features Section

Author:
ᴀʀ!ᴀ

3 months ago

562
File Upload

Author:
Rajesh Maheshwari

4 months ago

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

Author:
Akram Khan

9 months ago

1.3k
chair
by salvator

Author:
Baraka Salvator

1 month ago

314
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.4k
Thankyou Card

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.8k
button animation
button animation big

Author:
QQ-VVN

2 months ago

178
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

8 months ago

1.4k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

50.3k
Cards section - Sport

Author:
ABDO-SY

4 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components