Card animate

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 03-Feb-2025. Component is made with Tailwind v3.4. 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

Tailwind v3.4 2k 3

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

Animated cards

Prajwal Hallale

4 years ago

30.1k
Corner‑Framed Hover Transition Buttons
Minimal CTA buttons featuring animated corner shapes and smooth width transitions on hover, built with Tailwind CSS for a sharp, modern UI.

Arshid Iqbal

2 months ago

21
Minimal Card
This is awesome looking card

Shaik Sameer Basha

2 years ago

3.4k
Product grid

ariaw

11 months ago

817
products, show, items
display images, card, products

Rushikesh Latpate

9 months ago

850
GitHub For you Feed
GitHub For you Feed Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.8k
Chat Bot

Md. Tofayel islam

1 year ago

1.3k
Profile Card

Crimson

1 year ago

2k
alert
html , css

Hacker Development

1 year ago

2.1k
Card responsive and dark mode grid

Cristian

1 year ago

2.4k
Logo grid

ariaw

11 months ago

1k
Login form with fully functionl and best
@sufyandevs #sufyandevs #sufyandev #shanwebdev

Sufyan jutt

11 months ago

952

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.