18 Tailwind CSS Product Cards
15 / 18

All 18 in 18 Tailwind CSS Product Cards

  1. 01Tailwind Product Card with Hover-Reveal Add to Cart
  2. 02Pure-Tailwind 3D Flip Product Card with Spec Back
  3. 03Tailwind Contained Image Zoom Product Card
  4. 04Tailwind Mouse-Tracking 3D Tilt Product Card
  5. 05Tailwind Slide-Up Details Panel Product Card
  6. 06Tailwind Minimalist eCommerce Product Card
  7. 07Tailwind Glassmorphism Product Card
  8. 08Tailwind Dark-Mode Gadget Product Card with Accent Glow
  9. 09Tailwind Neon Glowing Conic-Border Product Card
  10. 10Tailwind Material-Design Elevation Product Card
  11. 11Tailwind Horizontal Product Card with Container Queries
  12. 12Tailwind Auto-Fit Product Catalog Grid
  13. 13Tailwind Sale Ribbon & Coupon Badge Product Card
  14. 14Tailwind Sneaker Card with Colourway & Size Picker
  15. 15Tailwind Digital Download Product Card
  16. 16Tailwind Food Delivery Card with Quantity Stepper
  17. 17Tailwind Real Estate Listing Card with Favourite Toggle
  18. 18Tailwind Subscription Pricing Card with Billing Switch
Pure TailwindMIT licensed

Tailwind Digital Download Product Card

For products with no photograph: a big file-type wordmark on a gradient, a rating line, a meta row of pills (format, size, version) and a download button whose arrow nudges down on hover. The whole micro-animation is group-hover:translate-y-[3px] on the glyph, and the gradient badge is one bg-linear-[…].

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tpc-15 w-full min-h-svh grid place-items-center bg-tpc15-bg font-tpc15-sans px-5 py-12" aria-label="Digital download product card demo">
  <article class="w-[min(340px,100%)] rounded-[18px] overflow-hidden bg-tpc15-card shadow-[0_16px_40px_-22px_oklch(0.25_0.04_300/0.4)]">
    <div role="img" aria-label="Preview: the UI kit open on a designer's workstation" class="relative aspect-[16/9] grid place-items-center bg-[url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=800&h=450&fit=crop&q=70')] bg-cover bg-center">
      <span aria-hidden="true" class="absolute inset-0 bg-linear-[135deg,color-mix(in_oklch,var(--color-tpc15-g1)_82%,transparent),color-mix(in_oklch,var(--color-tpc15-g2)_78%,transparent)]"></span>
      <span aria-hidden="true" class="relative font-tpc15-mono text-[40px] font-extrabold leading-none tracking-[0.06em] text-tpc15-onacc [text-shadow:0_2px_12px_oklch(0.2_0.05_300/0.45)]">.ZIP</span>
    </div>
    <div class="px-5.5 pt-5 pb-5.5">
      <h3 class="text-[18px] font-semibold leading-[1.35] text-tpc15-ink text-pretty">Nimbus UI Kit &mdash; 240 Components</h3>
      <p class="mt-2.5 text-[13px] text-tpc15-mut" aria-label="Rated 4.9 out of 5 from 860 reviews"><span aria-hidden="true" class="text-tpc15-star tracking-[0.05em]">&#9733;&#9733;&#9733;&#9733;&#9733;</span> 4.9 &middot; 860 reviews</p>
      <ul class="mt-3.5 flex flex-wrap gap-2 list-none">
        <li class="px-2.5 py-1.25 rounded-lg bg-tpc15-chip text-tpc15-chipink text-[12px] font-medium">Figma + Sketch</li>
        <li class="px-2.5 py-1.25 rounded-lg bg-tpc15-chip text-tpc15-chipink text-[12px] font-medium tabular-nums">48&nbsp;MB</li>
        <li class="px-2.5 py-1.25 rounded-lg bg-tpc15-chip text-tpc15-chipink text-[12px] font-medium tabular-nums">v3.2</li>
      </ul>
      <div class="mt-4.5 flex flex-wrap items-center justify-between gap-3">
        <p class="text-[22px] font-extrabold text-tpc15-ink tabular-nums">$39</p>
        <a href="#" download class="group inline-flex items-center gap-2 min-h-11 h-11.5 px-5.5 rounded-xl no-underline bg-tpc15-acc text-tpc15-onacc text-[14px] font-bold shadow-[0_10px_24px_-12px_var(--color-tpc15-acc)] transition-colors duration-150 hover:bg-tpc15-acc2 focus-visible:outline-3 focus-visible:outline-tpc15-ring focus-visible:outline-offset-2 motion-reduce:transition-none">
          <span aria-hidden="true" class="inline-block transition-transform duration-300 group-hover:translate-y-[3px] motion-reduce:transition-none motion-reduce:group-hover:translate-y-0">&darr;</span> Download
        </a>
      </div>
    </div>
  </article>
</section>
@import "tailwindcss";

@theme {
  --color-tpc15-bg: #f2f1f7;
  --color-tpc15-bg: oklch(0.95 0.008 300);
  --color-tpc15-card: #ffffff;
  --color-tpc15-card: oklch(1 0 0);
  --color-tpc15-ink: #1a1330;
  --color-tpc15-ink: oklch(0.23 0.04 300);
  --color-tpc15-mut: #5d5578;
  --color-tpc15-mut: oklch(0.48 0.035 300);
  --color-tpc15-chip: #f2f0f8;
  --color-tpc15-chip: oklch(0.96 0.01 300);
  --color-tpc15-chipink: #4a4266;
  --color-tpc15-chipink: oklch(0.42 0.04 300);
  --color-tpc15-g1: #8b5cf0;
  --color-tpc15-g1: oklch(0.6 0.18 295);
  --color-tpc15-g2: #4f6ae0;
  --color-tpc15-g2: oklch(0.55 0.17 268);
  --color-tpc15-acc: #6b3fd4;
  --color-tpc15-acc: oklch(0.5 0.19 292);
  --color-tpc15-acc2: #5a33b8;
  --color-tpc15-acc2: oklch(0.44 0.18 292);
  --color-tpc15-star: #d8a01f;
  --color-tpc15-star: oklch(0.75 0.14 82);
  --color-tpc15-ring: #c3a9f2;
  --color-tpc15-ring: oklch(0.78 0.1 292);
  --color-tpc15-onacc: #ffffff;
  --color-tpc15-onacc: oklch(1 0 0);
  --font-tpc15-sans: 'Manrope', system-ui, sans-serif;
  --font-tpc15-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tpc-15 {
  width: 100%;
  min-height: 100svh;
}

.tpc-15 ::selection {
  background: var(--color-tpc15-acc);
  color: #fff;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tpc15-bg: #f2f1f7;
  --color-tpc15-bg: oklch(0.95 0.008 300);
  --color-tpc15-card: #ffffff;
  --color-tpc15-card: oklch(1 0 0);
  --color-tpc15-ink: #1a1330;
  --color-tpc15-ink: oklch(0.23 0.04 300);
  --color-tpc15-mut: #5d5578;
  --color-tpc15-mut: oklch(0.48 0.035 300);
  --color-tpc15-chip: #f2f0f8;
  --color-tpc15-chip: oklch(0.96 0.01 300);
  --color-tpc15-chipink: #4a4266;
  --color-tpc15-chipink: oklch(0.42 0.04 300);
  --color-tpc15-g1: #8b5cf0;
  --color-tpc15-g1: oklch(0.6 0.18 295);
  --color-tpc15-g2: #4f6ae0;
  --color-tpc15-g2: oklch(0.55 0.17 268);
  --color-tpc15-acc: #6b3fd4;
  --color-tpc15-acc: oklch(0.5 0.19 292);
  --color-tpc15-acc2: #5a33b8;
  --color-tpc15-acc2: oklch(0.44 0.18 292);
  --color-tpc15-star: #d8a01f;
  --color-tpc15-star: oklch(0.75 0.14 82);
  --color-tpc15-ring: #c3a9f2;
  --color-tpc15-ring: oklch(0.78 0.1 292);
  --color-tpc15-onacc: #ffffff;
  --color-tpc15-onacc: oklch(1 0 0);
  --font-tpc15-sans: 'Manrope', system-ui, sans-serif;
  --font-tpc15-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tpc-15 {
  width: 100%;
  min-height: 100svh;
}

.tpc-15 ::selection {
  background: var(--color-tpc15-acc);
  color: #fff;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@700;800&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • A quiet port: almost the entire stylesheet dissolves into utilities, because nothing here needs a selector the variant system cannot express. The only bracketed escape is [text-shadow:…], which has no utility scale and should not have one.
  • The group moved from the card (where a naive port would put it) onto the download link, so the arrow answers its own button. Scope is the thing to get right when a card has exactly one animated detail.
  • The two gradient stops became --color-tpc15-g1/g2 theme entries rather than inline values, so the badge can be recoloured per file type from one place.
  • Enhancement over the CSS original: the footer gained flex-wrap so price and button never collide, the muted body text was darkened to clear 4.5:1, the arrow's nudge is cancelled under motion-reduce rather than merely un-transitioned, and meta numerals are tabular-nums.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Digital Download Product Card
Source: https://codefronts.com/components/tailwind-css-product-cards/tailwind-digital-download-product-card/

For products with no photograph: a big file-type wordmark on a gradient, a rating line, a meta row of pills (format, size, version) and a download button whose arrow nudges down on hover. The whole micro-animation is group-hover:translate-y-[3px] on the glyph, and the gradient badge is one bg-linear-[…].
## HTML
```html
<section class="tpc-15 w-full min-h-svh grid place-items-center bg-tpc15-bg font-tpc15-sans px-5 py-12" aria-label="Digital download product card demo">
  <article class="w-[min(340px,100%)] rounded-[18px] overflow-hidden bg-tpc15-card shadow-[0_16px_40px_-22px_oklch(0.25_0.04_300/0.4)]">
    <div role="img" aria-label="Preview: the UI kit open on a designer's workstation" class="relative aspect-[16/9] grid place-items-center bg-[url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=800&h=450&fit=crop&q=70')] bg-cover bg-center">
      <span aria-hidden="true" class="absolute inset-0 bg-linear-[135deg,color-mix(in_oklch,var(--color-tpc15-g1)_82%,transparent),color-mix(in_oklch,var(--color-tpc15-g2)_78%,transparent)]"></span>
      <span aria-hidden="true" class="relative font-tpc15-mono text-[40px] font-extrabold leading-none tracking-[0.06em] text-tpc15-onacc [text-shadow:0_2px_12px_oklch(0.2_0.05_300/0.45)]">.ZIP</span>
    </div>
    <div class="px-5.5 pt-5 pb-5.5">
      <h3 class="text-[18px] font-semibold leading-[1.35] text-tpc15-ink text-pretty">Nimbus UI Kit &mdash; 240 Components</h3>
      <p class="mt-2.5 text-[13px] text-tpc15-mut" aria-label="Rated 4.9 out of 5 from 860 reviews"><span aria-hidden="true" class="text-tpc15-star tracking-[0.05em]">&#9733;&#9733;&#9733;&#9733;&#9733;</span> 4.9 &middot; 860 reviews</p>
      <ul class="mt-3.5 flex flex-wrap gap-2 list-none">
        <li class="px-2.5 py-1.25 rounded-lg bg-tpc15-chip text-tpc15-chipink text-[12px] font-medium">Figma + Sketch</li>
        <li class="px-2.5 py-1.25 rounded-lg bg-tpc15-chip text-tpc15-chipink text-[12px] font-medium tabular-nums">48&nbsp;MB</li>
        <li class="px-2.5 py-1.25 rounded-lg bg-tpc15-chip text-tpc15-chipink text-[12px] font-medium tabular-nums">v3.2</li>
      </ul>
      <div class="mt-4.5 flex flex-wrap items-center justify-between gap-3">
        <p class="text-[22px] font-extrabold text-tpc15-ink tabular-nums">$39</p>
        <a href="#" download class="group inline-flex items-center gap-2 min-h-11 h-11.5 px-5.5 rounded-xl no-underline bg-tpc15-acc text-tpc15-onacc text-[14px] font-bold shadow-[0_10px_24px_-12px_var(--color-tpc15-acc)] transition-colors duration-150 hover:bg-tpc15-acc2 focus-visible:outline-3 focus-visible:outline-tpc15-ring focus-visible:outline-offset-2 motion-reduce:transition-none">
          <span aria-hidden="true" class="inline-block transition-transform duration-300 group-hover:translate-y-[3px] motion-reduce:transition-none motion-reduce:group-hover:translate-y-0">&darr;</span> Download
        </a>
      </div>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tpc15-bg: #f2f1f7;
  --color-tpc15-bg: oklch(0.95 0.008 300);
  --color-tpc15-card: #ffffff;
  --color-tpc15-card: oklch(1 0 0);
  --color-tpc15-ink: #1a1330;
  --color-tpc15-ink: oklch(0.23 0.04 300);
  --color-tpc15-mut: #5d5578;
  --color-tpc15-mut: oklch(0.48 0.035 300);
  --color-tpc15-chip: #f2f0f8;
  --color-tpc15-chip: oklch(0.96 0.01 300);
  --color-tpc15-chipink: #4a4266;
  --color-tpc15-chipink: oklch(0.42 0.04 300);
  --color-tpc15-g1: #8b5cf0;
  --color-tpc15-g1: oklch(0.6 0.18 295);
  --color-tpc15-g2: #4f6ae0;
  --color-tpc15-g2: oklch(0.55 0.17 268);
  --color-tpc15-acc: #6b3fd4;
  --color-tpc15-acc: oklch(0.5 0.19 292);
  --color-tpc15-acc2: #5a33b8;
  --color-tpc15-acc2: oklch(0.44 0.18 292);
  --color-tpc15-star: #d8a01f;
  --color-tpc15-star: oklch(0.75 0.14 82);
  --color-tpc15-ring: #c3a9f2;
  --color-tpc15-ring: oklch(0.78 0.1 292);
  --color-tpc15-onacc: #ffffff;
  --color-tpc15-onacc: oklch(1 0 0);
  --font-tpc15-sans: 'Manrope', system-ui, sans-serif;
  --font-tpc15-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tpc-15 {
  width: 100%;
  min-height: 100svh;
}

.tpc-15 ::selection {
  background: var(--color-tpc15-acc);
  color: #fff;
}
```

How this works

The badge leads, the photo supports. Intangible goods have no product shot, so the media slot carries the format wordmark over a tinted workspace photo — .ZIP, .PDF, .FIG — at display size on a gradient, with aspect-[16/9] keeping the card's proportions honest against the photo cards elsewhere in the collection.

The arrow is the only motion, and it is scoped.

<a class="group …">
  <span aria-hidden="true" class="transition-transform group-hover:translate-y-[3px] motion-reduce:transition-none">↓</span> Download
</a>

The group sits on the link, not the card, because the nudge should answer the button's hover and nothing else. One misplaced group and the arrow twitches whenever the cursor crosses the title.

Everything is text. Rating, review count, format, file size and version are real content with a labelled rating value — which is what makes a digital-goods card indexable, where an image-based badge would be invisible.

Make it yours

  • Badge label, backing photo and gradient per product type: .PDF, .EPUB, .FIG, each with its own two-stop bg-linear-[…].
  • Add a ghost 'Preview' button beside the download for gated demos; the footer is already flex-wrap.
  • Trade the star glyphs for a numeric rating plus count if the card gets narrower.
  • Licence line: add a muted 12px row under the meta pills ('Personal &middot; Extended').
  • Retheme through --color-tpc15-acc; the button fill, its tinted shadow and the focus ring all read it.

Gotchas — read before shipping

  • Star glyphs alone are not a rating. The aria-label carrying '4.9 out of 5 from 860 reviews' is what gets announced; the glyph row is aria-hidden.
  • A download must be a real <a download> or <button> with a visible text label — an icon-only download control fails both AT and plain comprehension.
  • The badge is carrying the 'what am I buying' job. Keep it legible at card width; a long extension at 40px will overflow before the layout warns you.
  • group-hover: without a focus-visible counterpart on the link would make the animation mouse-only. The ring is the keyboard user's version of the same feedback.
  • Coloured shadows built from the accent go muddy on dark backgrounds — check the negative spread if you retheme.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Gradient badge plus a transform micro-animation are universally supported; the floor quoted is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

linear gradienttw ↗aspect-ratiotw ↗transitionstw ↗:focus-visibletw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →