Hover

html

<div class="hover-demo" style="--accent:#F5C2E0;">
  <div class="hover-demo__card hover-demo__card--lift is-hovered">
    <div class="hover-demo__thumb"></div>
    <p class="hover-demo__title">Trail running shoe</p>
  </div>
  <p class="hover-demo__caption">shown as if the pointer is over the card{{unless hovered}}rest state &mdash; move your pointer over it

tailwind

<div style="width:220px;font-family:system-ui,sans-serif;color:#241430">
  <div class="hover-tw hover-tw--lift is-hovered rounded-xl p-3.5 motion-safe:transition-all border-[1.5px]" style="background:#FAF7F2;border-color:#24143022">
    <div class="h-20 rounded-lg mb-2.5 bg-[#24143014]"></div>
    <p class="m-0 font-semibold text-[13px]">Trail running shoe</p>
  </div>
  <p class="mt-2.5 text-xs text-[#241430aa]">shown as if the pointer is over the card{{unless hovered}}rest state &mdash; move your pointer over it

react

export function HoverCard({
  title = "Trail running shoe",
  style = "lift",
  hovered = true,
  accent = "#F5C2E0",
}) {
  const active = {
    lift: { transform: "translateY(-4px)", boxShadow: "0 14px 26px rgba(36,20,48,.18)" },
    glow: { boxShadow: "0 0 0 4px " + accent },
    border: { borderColor: accent },
  }[style];
  return (
    <div style={{ width: 220, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <div className="hover-card" style={{ borderRadius: 12, padding: 14, background: "#FAF7F2", border: "1.5px solid #24143022", ...(hovered ? active : {}) }}>
        <div style={{ height: 80, borderRadius: 8, background: "#24143014", marginBottom: 10 }} />
        <p style={{ margin: 0, fontWeight: 600, fontSize: 13 }}>{title}</p>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430aa" }}>{hovered ? "shown as if the pointer is over the card" : "rest state \u2014 move your pointer over it"}</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .hover-card { transition: transform .15s, box-shadow .15s, border-color .15s; }
        }
      `}</style>
    </div>
  );
}