Card animate

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 03-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

22

Fork Fullscreen

<div
  class="relative p-8 overflow-hidden rounded-xl min-h-28 max-w-96 shadow h-fit w-full 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-2xl">
    <div
      class="absolute w-20 h-20 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-amber-700 via-fuchsia-800 to-teal-300 rounded-full transform -translate-x-1/2 -translate-y-1/2 pointer-events-none mix-blend-soft-light  "
      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_

2 years ago

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

46.7k
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

12.2k
Responsive Article Section

Author:
Prashant

2 years ago

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

Author:
Noob

2 years ago

20.1k
Articles Card Grid

Author:
Noob

2 years ago

10.1k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.6k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

20.8k
Features grid

Author:
Sophia Baker

2 years ago

8.7k
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

10.6k
Card grid for posts

Author:
Mr Robot

2 years ago

18.7k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

13.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1