5 Tailwind1 with JSPublished 2026-10-05Free · no sign-up
Six card hovers in Tailwind: a product card whose details panel slides up, a border that turns into a gradient, an image that zooms inside its frame, a spotlight that follows the pointer, a retro offset-shadow card and a plan card that expands to show its features.
A product card where a panel with the price and button slides up on hover. On touch screens, which have no hover, an arbitrary media variant shows the panel permanently so nothing is hidden from phone users.
A plain card whose one-pixel grey frame turns into a gradient on hover. The frame is the wrapper's background showing through p-px around a white inner card, so switching the wrapper to a gradient recolours only the edge.
View code
<a href="#integrations" class="group block w-64 max-w-full rounded-2xl bg-slate-200 p-px transition hover:bg-gradient-to-br hover:from-fuchsia-500 hover:to-cyan-500 focus-visible:bg-gradient-to-br focus-visible:from-fuchsia-500 focus-visible:to-cyan-500 focus-visible:outline-none">
<div class="rounded-[15px] bg-white p-5">
<p class="text-xs font-bold uppercase tracking-wider text-fuchsia-700">New</p>
<h3 class="mt-1 text-lg font-bold text-slate-900">Integrations</h3>
<p class="mt-1 text-sm text-slate-600">Connect your store to 40 apps in two clicks.</p>
</div>
</a>
03. Tailwind Card with Zooming Image
TailwindCardImage
The picture inside the card zooms slowly on hover while the frame stays fixed, thanks to overflow-hidden on the image wrapper. The long duration-700 makes the zoom feel calm rather than jumpy.
View code
<a href="#trip" class="group block w-60 max-w-full overflow-hidden rounded-2xl bg-white shadow-md ring-1 ring-slate-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-sky-700">
<div class="overflow-hidden"><div role="img" aria-label="Mountain lake at dawn" class="aspect-[4/3] bg-[linear-gradient(170deg,#bae6fd,#7dd3fc_38%,#0f766e_39%,#134e4a_70%,#0c4a6e_71%)] transition-transform duration-700 group-hover:scale-110 motion-reduce:transition-none"></div></div>
<div class="p-4"><h3 class="font-bold text-slate-900">Lake Bled in three days</h3><p class="text-sm text-slate-600">An easy itinerary for first-timers.</p></div>
</a>
04. Tailwind Pointer Spotlight Card
TailwindCardSpotlight
A dark card where a soft light follows the pointer across the surface. A script writes the pointer position to two custom properties and an arbitrary radial-gradient utility draws the glow there.
View code
<article data-spot class="group relative w-64 max-w-full overflow-hidden rounded-2xl border border-white/10 bg-slate-900 p-6 text-slate-100">
<span aria-hidden="true" class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100 [background:radial-gradient(240px_circle_at_var(--x,50%)_var(--y,50%),rgba(56,189,248,.2),transparent_60%)]"></span>
<h3 class="relative text-lg font-bold">Realtime analytics</h3>
<p class="relative mt-1 text-sm text-slate-300">See every visitor the moment they land, with no sampling.</p>
</article>
var s = document.querySelector('[data-spot]');
s.addEventListener('pointermove', function (e) { var r = s.getBoundingClientRect(); s.style.setProperty('--x', e.clientX - r.left + 'px'); s.style.setProperty('--y', e.clientY - r.top + 'px'); });
05. Tailwind Offset Shadow Card
TailwindCardRetro
A bold card on a solid coloured block offset behind it. On hover the card moves up and left while the block moves down and right, so the gap between them grows like the card is lifting off the page.
A plan card that grows to reveal its feature list on hover or when something inside has focus. The list animates height with grid-rows-[0fr] to grid-rows-[1fr], and touch screens always show it open.