Card animate

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 01-Feb-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 Grid Animation Blog Card

Author Raul antonio de la cruz hernandez

1.2k

5

Fork Fullscreen

<div class="relative p-8 overflow-hidden rounded-xl min-h-28 max-w-96 shadow h-fit w-full dark:bg-cool-950 dark:text-cool-100 transition-all duration-200 border border-cool-300 dark:border-cool-700 group hover:shadow">
  
  <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10 blur-xl">
    <div class="absolute w-20 h-20 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 rounded-full transform -translate-x-1/2 -translate-y-1/2 pointer-events-none mix-blend-soft-light transition-all duration-100"
     style="top: var(--mouse-y); left: var(--mouse-x);"></div>
  </div>

<h2 class="text-xl font-bold mb-2 relative">Título de la tarjeta</h2>
  <p class="text-gray-700 relative">Este es el contenido de la tarjeta.</p>
</div>

<script>
  document.querySelector('.group').addEventListener('mousemove', (e) => {
    const card = e.currentTarget;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    card.style.setProperty('--mouse-x', `${x}px`);
    card.style.setProperty('--mouse-y', `${y}px`);
  });
</script>

Related Examples

Responsive Grid with Featured image

Author:
_Amar_

3 years ago

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

3 years ago

52.2k
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.6k
Responsive Article Section

Author:
Prashant

3 years ago

16.7k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

3 years ago

24k
Articles Card Grid

Author:
Noob

3 years ago

11.1k
Info cards
Show various statistics on your website

Author:
Arya

3 years ago

11.7k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

3 years ago

24.3k
Features grid

Author:
Sophia Baker

3 years ago

10.2k
Blog post cards
responsive blog post cards

Author:
Mr Robot

3 years ago

12.8k
Card grid for posts

Author:
Mr Robot

3 years ago

22.8k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

3 years ago

15.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12