20 Tailwind CSS Cards

The laser edge on the conic-border card is driven by a registered custom property, not by animating a gradient directly. Declare it with @property --angle, giving it syntax:'<angle>', inherits:false and initial-value:0deg, then run a keyframe animation that moves --angle from 0deg to 360deg. The visible border is a conic-gradient(from var(--angle), ...) painted on a pseudo-element that sits behind the panel with a small negative inset and the same border-radius. The opaque terminal panel on top masks the centre, so only the rim shows. The registration is the whole trick: a plain --angle variable is a string and cannot be interpolated, so the gradient would jump between frames. Registering it as an <angle> type lets the browser tween it smoothly.

Three declarations have to line up. The parent that contains the tilting element needs perspective (roughly 800px to 1200px) — perspective set on the moving element itself does nothing. The element you rotate needs transform-style:preserve-3d so its children keep their own Z positions instead of being flattened into one plane; the flip card and the translateZ pop-out product card both depend on this. For the flip card specifically, the front and back faces each need backface-visibility:hidden, and the back face is pre-rotated rotateY(180deg) so it faces away until the container turns. The classic bug is putting perspective on the rotating card rather than its wrapper — you get a flat rotate with no depth. The second is forgetting preserve-3d, which collapses the two faces so the back bleeds through.

Anything gated behind :hover alone is invisible to keyboard and most touch users. These demos pair every hover trigger with :focus-within. The flip business card turns on .card:hover, .card:focus-within, so tabbing to a link inside the back face reveals it. The stacked-card cascade fans out on :focus-within too, and the product tile shows its quick-add on the same combined selector. For that to fire, the card must contain a genuinely focusable element — a real <a> or <button>, not a <div> with a click handler. Add a visible :focus-visible outline so sighted keyboard users can see where they are, and don't hide the revealed controls with display:none when collapsed, or they drop out of the tab order entirely; use opacity and pointer-events instead so focus can still reach them.

The glass panel uses backdrop-filter:blur() plus a saturate boost over a semi-transparent white or dark fill — the blur is what turns the drifting aurora blobs behind it into a soft wash instead of distracting colour. Readability comes from three things working together: a background fill with real alpha (around 0.1 to 0.15) so the blur has something to tint, a hairline 1px border in rgba white to define the edge, and text kept at near-full opacity rather than tinted down. The common failures: forgetting the fill so the panel is pure blur and text loses contrast; and using backdrop-filter without a fallback — Firefox needed it behind a flag for a long time, so give the panel a solid-ish background as the base and treat the blur as enhancement. Test the worst case where a bright aurora blob passes directly under the smallest body text.

It is a hand-authored inline <svg> with a fixed viewBox, no dependency. The trend line is a single <path> or <polyline> whose points you compute by mapping each data value onto the viewBox height — larger value, smaller Y, because SVG Y grows downward. The soft area beneath it is the same point list closed down to the baseline and filled with a gradient defined in <defs>. Because it is inline SVG, the stroke inherits currentColor or a gradient clip, so it matches the card's accent for free. Two gotchas: set vector-effect:non-scaling-stroke if you let the SVG stretch responsively, otherwise the line thickens as the card widens; and mark it aria-hidden='true' since the exact number and trend pill already carry the meaning — a screen reader announcing raw path coordinates is noise.

The three plans sit in a symmetric grid, and the middle tier is raised with a small negative translateY plus a coloured ring and a soft glow shadow, so it reads as the recommended choice without breaking the row's alignment. Keep the lifted card the same width as its siblings — only the transform and the ring change, never the column size, or the grid looks broken. The glow is a large-radius, low-opacity box-shadow in the accent colour rather than a heavy dark shadow. A frequent bug is the raised card getting clipped by an overflow:hidden ancestor once you translate it upward; let the container overflow visibly or add matching top padding. If you animate the lift on hover, apply it to all three cards so hovering a side plan doesn't make the layout jump, and guard the motion with reduced-motion.

The mesh-gradient cover has a faint 20px grid drawn with a repeating linear-gradient background (two gradients, one per axis) sized to the grid step. The reason it fades toward the edges rather than tiling flat is a mask-image — usually a radial-gradient from opaque centre to transparent rim — applied to the grid layer, so the lines are strongest under the avatar and dissolve outward. The avatar itself overlaps the cover by half its height using a negative margin-top on the avatar sitting in the content block below, with the cover given no bottom clipping so the overlap shows. Watch two things: the parent must not be overflow:hidden or the overlapping avatar gets cut; and give the avatar a solid ring or border in the card background colour so it reads as lifted off the cover instead of pasted onto it.

The aurora glass card, the rotating conic border and the 3D flip and pop-out cards are showpieces — a hero unit, a single feature callout, a link-in-bio. Don't render twenty of them in a scrolling grid. The conic-border animation runs a continuous --angle keyframe and the aurora stacks blurred layers with drifting blobs; multiplied across a long list they burn battery and can drop frames on low-end devices, and backdrop-filter is one of the most expensive things to composite. For a dense feed reach for the flatter shapes instead — the horizontal article feed, the SaaS feature card, the plain product tile. Whatever you pick, wrap every continuous animation in @media (prefers-reduced-motion: reduce) and stop it, since spinning borders and flipping panels are exactly the vestibular triggers that setting exists to disable. Motion should be the exception on a page, not its texture.