Home
Abdul Baset Bappy
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS

Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS

nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

This tailwind example is contributed by Abdul Baset Bappy, on 26-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Transitions,Article Card, Blog page card, Article card

Card Other Animation Blog Card

Author Abdul Baset Bappy

1.8k

Fork Fullscreen

<div class="relative p-4 sm:p-6 lg:p-8">
    <p class="text-sm font-medium tracking-widest text-pink-500 uppercase">Developer</p>

<p class="text-xl font-bold text-white sm:text-2xl">Abdul Baset</p>

<div class="mt-32 sm:mt-48 lg:mt-64">
      <div
        class="translate-y-8 transform opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100"
      >
        <p class="text-sm text-white">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis perferendis hic asperiores
          quibusdam quidem voluptates doloremque reiciendis nostrum harum. Repudiandae?
        </p>
      </div>
    </div>
  </div>
</a>
  <a href="#" class="group relative block bg-black rounded-lg overflow-hidden">
  <img
    alt=""
    src="https://images.pexels.com/photos/14653174/pexels-photo-14653174.jpeg"
    class="absolute inset-0 h-full w-full rounded-lg object-cover opacity-75 transition-opacity group-hover:opacity-50"
  />

<div class="relative p-4 sm:p-6 lg:p-8">
    <p class="text-sm font-medium tracking-widest text-pink-500 uppercase">Developer</p>

<p class="text-xl font-bold text-white sm:text-2xl">Tony Wayne</p>

<div class="mt-32 sm:mt-48 lg:mt-64">
      <div
        class="translate-y-8 transform opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100"
      >
        <p class="text-sm text-white">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis perferendis hic asperiores
          quibusdam quidem voluptates doloremque reiciendis nostrum harum. Repudiandae?
        </p>
      </div>
    </div>
  </div>
</a>
  <a href="#" class="group relative block bg-black rounded-lg overflow-hidden">
  <img
    alt=""
    src="https://images.unsplash.com/photo-1511367461989-f85a21fda167?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D"
    class="absolute inset-0 h-full w-full rounded-lg object-cover opacity-75 transition-opacity group-hover:opacity-50"
  />

<div class="relative p-4 sm:p-6 lg:p-8">
    <p class="text-sm font-medium tracking-widest text-pink-500 uppercase">Developer</p>

<p class="text-xl font-bold text-white sm:text-2xl">Billu Mao</p>

Related Examples

Information card

Author:
Samuel Dawson

3 years ago

12.3k
Basic US Flag Card
Here's a set of card components styled with Tailwind CSS that represent various US-themed elements:

Author:
Uwase Alliance

9 months ago

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

Author:
Arya

3 years ago

13.1k
random design

Author:
QQ-VVN

9 months ago

616
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

9 months ago

1.1k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

1 year ago

2.4k
Cards

Author:
Morris Muriuki Muthigani

7 months ago

1.1k
Tailwind card

Author:
Conan Hilton

3 years ago

13.8k
Info cards for admin panal

Author:
Sophia Baker

3 years ago

9.8k
MENU OMERLINKS
MENU OMERLINKS

Author:
Omer fils ELENGA

1 month ago

142
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

12.4k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components