Open demo

CSS code

HTML 
<div><span class="lbl">Online course cards</span>
<ul class="dg">
  <li><article class="dg-card">
    <div class="dg-cover"><img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=700&q=70" alt="Close-up of colourful JavaScript and HTML code on a dark editor screen" width="700" height="394" loading="lazy"><span class="dg-flag">Bestseller</span><span class="dg-level">Beginner</span></div>
    <div class="dg-body">
      <ul class="dg-meta">
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9.5l4.5 2.5-4.5 2.5z"/></svg>38 lessons</li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>9 h 20 min</li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h16M7 15l3-3 3 3 4-5"/></svg>6 projects</li>
      </ul>
      <h3 class="dg-title"><a href="#">Modern JavaScript from Zero</a></h3>
      <p class="dg-by"><span class="dg-avatar" aria-hidden="true">MO</span>Mara Okafor, front-end lead</p>
      <p class="dg-rating"><span class="dg-stars" style="--r:4.8" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.8 out of 5, 2,140 reviews</span><span aria-hidden="true">4.8 (2,140)</span></p>
      <div class="dg-buy">
        <p class="dg-price"><span class="sr-only">Sale price</span>$39 <s><span class="sr-only">Was</span> $89</s></p>
        <button type="button" class="dg-add">Add<span class="sr-only"> Modern JavaScript from Zero</span> to cart</button>
      </div>
    </div>
  </article></li>
  <li><article class="dg-card">
    <div class="dg-cover"><img src="https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=700&q=70" alt="Hands drawing a forest scene with a stylus on a graphics tablet next to a laptop" width="700" height="394" loading="lazy"><span class="dg-level">Intermediate</span></div>
    <div class="dg-body">
      <ul class="dg-meta">
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9.5l4.5 2.5-4.5 2.5z"/></svg>24 lessons</li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>6 h 40 min</li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h16M7 15l3-3 3 3 4-5"/></svg>Brush pack included</li>
      </ul>
      <h3 class="dg-title"><a href="#">Digital Painting: Light and Colour</a></h3>
      <p class="dg-by"><span class="dg-avatar" aria-hidden="true">JL</span>Jonas Lind, concept artist</p>
      <p class="dg-rating"><span class="dg-stars" style="--r:4.7" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.7 out of 5, 860 reviews</span><span aria-hidden="true">4.7 (860)</span></p>
      <div class="dg-buy">
        <p class="dg-price">$59</p>
        <button type="button" class="dg-add">Add<span class="sr-only"> Digital Painting: Light and Colour</span> to cart</button>
      </div>
    </div>
  </article></li>
</ul></div>

<div><span class="lbl">Digital downloads</span>
<ul class="dg">
  <li><article class="dg-card">
    <div class="dg-cover"><img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?auto=format&fit=crop&w=700&q=70" alt="Open paperback book on a white bedsheet beside a latte and reading glasses" width="700" height="394" loading="lazy"></div>
    <div class="dg-body">
      <ul class="dg-chips" aria-label="Formats"><li>PDF</li><li>EPUB</li><li>Large print</li></ul>
      <h3 class="dg-title"><a href="#">The Slow Kitchen: 60 Weeknight Recipes</a></h3>
      <p class="dg-sub">212 pages · 48 photographs · metric and US units</p>
      <p class="dg-note"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>Instant download after checkout</p>
      <div class="dg-buy">
        <p class="dg-price">$14</p>
        <button type="button" class="dg-add">Add<span class="sr-only"> The Slow Kitchen e-book</span> to cart</button>
      </div>
    </div>
  </article></li>
  <li><article class="dg-card">
    <div class="dg-cover"><img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?auto=format&fit=crop&w=700&q=70" alt="Photographer tossing a camera into the air in an autumn forest" width="700" height="394" loading="lazy"><span class="dg-flag">New</span></div>
    <div class="dg-body">
      <ul class="dg-chips" aria-label="Formats"><li>XMP</li><li>DNG</li><li>Desktop and mobile</li></ul>
      <h3 class="dg-title"><a href="#">Autumn Film Presets, Vol. 2</a></h3>
      <p class="dg-sub">16 presets · warm, faded and matte looks · install guide</p>
      <p class="dg-note"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>Instant download after checkout</p>
      <div class="dg-buy">
        <p class="dg-price">$24</p>
        <button type="button" class="dg-add">Add<span class="sr-only"> Autumn Film Presets, Vol. 2</span> to cart</button>
      </div>
    </div>
  </article></li>
</ul></div>

<div><span class="lbl">App listings</span>
<ul class="dg">
  <li><article class="dg-app">
    <svg class="dg-icon" viewBox="0 0 72 72" aria-hidden="true"><defs><linearGradient id="dg-i1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#312e81"/><stop offset="1" stop-color="#0e7490"/></linearGradient></defs><rect width="72" height="72" rx="18" fill="url(#dg-i1)"/><path d="M44 18a16 16 0 1 0 10 28.5A18 18 0 0 1 44 18z" fill="#fef3c7"/><circle cx="23" cy="22" r="2" fill="#fff"/><circle cx="31" cy="15" r="1.4" fill="#fff"/></svg>
    <div class="dg-body">
      <h3 class="dg-title"><a href="#">Stillwater: Sleep Sounds</a></h3>
      <p class="dg-sub">Phone · tablet · watch</p>
      <p class="dg-rating"><span class="dg-stars" style="--r:4.6" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.6 out of 5, 12,400 ratings</span><span aria-hidden="true">4.6 (12.4k)</span></p>
    </div>
    <div class="dg-buy">
      <span class="dg-iap">One-time purchase · no ads</span>
      <button type="button" class="dg-get">$4.99<span class="sr-only">, buy Stillwater: Sleep Sounds</span></button>
    </div>
  </article></li>
  <li><article class="dg-app">
    <svg class="dg-icon" viewBox="0 0 72 72" aria-hidden="true"><defs><linearGradient id="dg-i2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#16a34a"/><stop offset="1" stop-color="#065f46"/></linearGradient></defs><rect width="72" height="72" rx="18" fill="url(#dg-i2)"/><rect x="18" y="38" width="8" height="16" rx="2" fill="#fff"/><rect x="32" y="28" width="8" height="26" rx="2" fill="#fff"/><rect x="46" y="18" width="8" height="36" rx="2" fill="#bbf7d0"/></svg>
    <div class="dg-body">
      <h3 class="dg-title"><a href="#">Pocket Ledger: Budget Planner</a></h3>
      <p class="dg-sub">Phone · tablet · web</p>
      <p class="dg-rating"><span class="dg-stars" style="--r:4.4" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.4 out of 5, 3,870 ratings</span><span aria-hidden="true">4.4 (3.9k)</span></p>
    </div>
    <div class="dg-buy">
      <span class="dg-iap">Free · Pro plan $2.99/mo</span>
      <button type="button" class="dg-get">Get<span class="sr-only"> Pocket Ledger: Budget Planner, free</span></button>
    </div>
  </article></li>
</ul></div>
CSS 
/* Digital product cards: course cards (lessons, length, level, instructor), download cards (formats and an
   instant-download note) and app listings (icon, platforms, buy button). No photo of a box, so the meta does the selling. */
.dg{--dg-ink:#1e1b4b;--dg-muted:#4c4f6b;--dg-line:#e4e4f0;--dg-accent:#6d28d9;--dg-accent-hover:#5b21b6;--dg-soft:#f1ecfd;--dg-star:#d97706;--dg-star-off:#d4d4dc;--dg-focus:#2563eb;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;list-style:none;margin:0;padding:0}
.dg-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--dg-line);border-radius:18px;overflow:hidden}
.dg-cover{position:relative;aspect-ratio:16/9;background:#2e1065;overflow:hidden}
.dg-cover img{display:block;width:100%;height:100%;object-fit:cover}
.dg-level{position:absolute;left:12px;bottom:12px;padding:3px 10px;border-radius:6px;background:rgba(17,12,46,.82);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.dg-flag{position:absolute;top:12px;left:12px;padding:3px 10px;border-radius:6px;background:#fde68a;color:#713f12;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.dg-body{display:flex;flex:1;flex-direction:column;gap:8px;padding:18px 20px 20px}
.dg-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-size:.78rem;font-weight:600;color:var(--dg-muted)}
.dg-meta li{display:flex;align-items:center;gap:5px}
.dg-meta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dg-title{margin:0;font-size:1.1rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.dg-title a{color:var(--dg-ink);text-decoration:none}
.dg-title a:hover{text-decoration:underline;text-underline-offset:3px}
.dg-by{display:flex;align-items:center;gap:8px;margin:0;font-size:.82rem;color:var(--dg-muted)}
.dg-avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--dg-soft);color:var(--dg-accent);font-size:.68rem;font-weight:800}
.dg-rating{display:flex;align-items:center;gap:6px;margin:0;font-size:.8rem;color:var(--dg-muted)}
.dg-stars{--r:5;font-size:.9rem;letter-spacing:1px;line-height:1;color:transparent;
  background:linear-gradient(90deg,var(--dg-star) calc(var(--r) / 5 * 100%),var(--dg-star-off) 0);-webkit-background-clip:text;background-clip:text}
.dg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.dg-chips li{padding:2px 9px;border-radius:6px;background:var(--dg-soft);color:#4c1d95;font-size:.72rem;font-weight:700;letter-spacing:.03em}
.dg-note{display:flex;align-items:center;gap:6px;margin:0;font-size:.8rem;font-weight:600;color:#166534}
.dg-note svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dg-buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--dg-line)}
.dg-price{display:flex;align-items:baseline;gap:8px;margin:0;font-size:1.3rem;font-weight:800;color:var(--dg-ink)}
.dg-price s{font-size:.85rem;font-weight:500;color:var(--dg-muted)}
.dg-add{padding:10px 18px;border:0;border-radius:10px;background:var(--dg-accent);color:#fff;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background-color .15s}
.dg-add:hover{background:var(--dg-accent-hover)}
/* App listing */
.dg-app{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:20px;background:#fff;border:1px solid var(--dg-line);border-radius:18px;height:100%}
.dg-icon{display:block;width:72px;height:72px;border-radius:18px}
.dg-app .dg-body{padding:0;gap:6px}
.dg-app .dg-title{font-size:1.02rem}
.dg-sub{margin:0;font-size:.82rem;color:var(--dg-muted)}
.dg-app .dg-buy{grid-column:1 / -1;padding-top:14px}
.dg-get{display:flex;align-items:center;gap:8px;padding:8px 20px;border:0;border-radius:999px;background:var(--dg-soft);color:var(--dg-accent);font:inherit;font-size:.88rem;font-weight:800;cursor:pointer;transition:background-color .15s,color .15s}
.dg-get:hover{background:var(--dg-accent);color:#fff}
.dg-iap{font-size:.75rem;font-weight:500;color:var(--dg-muted)}
.dg :is(a,button):focus-visible{outline:3px solid var(--dg-focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.dg-add,.dg-get{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Online course cards</span>
<ul class="dg row row-cols-1 row-cols-md-2 list-unstyled mb-0">
  <li class="col"><article class="card h-100">
    <div class="dg-cover"><img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=700&q=70" alt="Close-up of colourful JavaScript and HTML code on a dark editor screen" width="700" height="394" loading="lazy"><span class="dg-flag badge">Bestseller</span><span class="dg-level badge">Beginner</span></div>
    <div class="dg-body">
      <ul class="dg-meta">
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9.5l4.5 2.5-4.5 2.5z"/></svg>38 lessons</li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>9 h 20 min</li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h16M7 15l3-3 3 3 4-5"/></svg>6 projects</li>
      </ul>
      <h3 class="dg-title"><a href="#" class="text-decoration-none">Modern JavaScript from Zero</a></h3>
      <p class="dg-by"><span class="dg-avatar" aria-hidden="true">MO</span>Mara Okafor, front-end lead</p>
      <p class="dg-rating"><span class="dg-stars" style="--r:4.8" aria-hidden="true">★★★★★</span><span class="visually-hidden">Rated 4.8 out of 5, 2,140 reviews</span><span aria-hidden="true">4.8 (2,140)</span></p>
      <div class="dg-buy">
        <p class="dg-price"><span class="visually-hidden">Sale price</span>$39 <s><span class="visually-hidden">Was</span> $89</s></p>
        <button type="button" class="btn dg-add">Add<span class="visually-hidden"> Modern JavaScript from Zero</span> to cart</button>
      </div>
    </div>
  </article></li>
  <li class="col"><article class="card h-100">
    <div class="dg-cover"><img src="https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=700&q=70" alt="Hands drawing a forest scene with a stylus on a graphics tablet next to a laptop" width="700" height="394" loading="lazy"><span class="dg-level badge">Intermediate</span></div>
    <div class="dg-body">
      <ul class="dg-meta">
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9.5l4.5 2.5-4.5 2.5z"/></svg>24 lessons</li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>6 h 40 min</li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h16M7 15l3-3 3 3 4-5"/></svg>Brush pack included</li>
      </ul>
      <h3 class="dg-title"><a href="#" class="text-decoration-none">Digital Painting: Light and Colour</a></h3>
      <p class="dg-by"><span class="dg-avatar" aria-hidden="true">JL</span>Jonas Lind, concept artist</p>
      <p class="dg-rating"><span class="dg-stars" style="--r:4.7" aria-hidden="true">★★★★★</span><span class="visually-hidden">Rated 4.7 out of 5, 860 reviews</span><span aria-hidden="true">4.7 (860)</span></p>
      <div class="dg-buy">
        <p class="dg-price">$59</p>
        <button type="button" class="btn dg-add">Add<span class="visually-hidden"> Digital Painting: Light and Colour</span> to cart</button>
      </div>
    </div>
  </article></li>
</ul></div>

<div><span class="lbl">Digital downloads</span>
<ul class="dg row row-cols-1 row-cols-md-2 list-unstyled mb-0">
  <li class="col"><article class="card h-100">
    <div class="dg-cover"><img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?auto=format&fit=crop&w=700&q=70" alt="Open paperback book on a white bedsheet beside a latte and reading glasses" width="700" height="394" loading="lazy"></div>
    <div class="dg-body">
      <ul class="dg-chips" aria-label="Formats"><li>PDF</li><li>EPUB</li><li>Large print</li></ul>
      <h3 class="dg-title"><a href="#" class="text-decoration-none">The Slow Kitchen: 60 Weeknight Recipes</a></h3>
      <p class="dg-sub">212 pages · 48 photographs · metric and US units</p>
      <p class="dg-note"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>Instant download after checkout</p>
      <div class="dg-buy">
        <p class="dg-price">$14</p>
        <button type="button" class="btn dg-add">Add<span class="visually-hidden"> The Slow Kitchen e-book</span> to cart</button>
      </div>
    </div>
  </article></li>
  <li class="col"><article class="card h-100">
    <div class="dg-cover"><img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?auto=format&fit=crop&w=700&q=70" alt="Photographer tossing a camera into the air in an autumn forest" width="700" height="394" loading="lazy"><span class="dg-flag badge">New</span></div>
    <div class="dg-body">
      <ul class="dg-chips" aria-label="Formats"><li>XMP</li><li>DNG</li><li>Desktop and mobile</li></ul>
      <h3 class="dg-title"><a href="#" class="text-decoration-none">Autumn Film Presets, Vol. 2</a></h3>
      <p class="dg-sub">16 presets · warm, faded and matte looks · install guide</p>
      <p class="dg-note"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>Instant download after checkout</p>
      <div class="dg-buy">
        <p class="dg-price">$24</p>
        <button type="button" class="btn dg-add">Add<span class="visually-hidden"> Autumn Film Presets, Vol. 2</span> to cart</button>
      </div>
    </div>
  </article></li>
</ul></div>

<div><span class="lbl">App listings</span>
<ul class="dg row row-cols-1 row-cols-md-2 list-unstyled mb-0">
  <li class="col"><article class="card h-100 dg-app">
    <svg class="dg-icon" viewBox="0 0 72 72" aria-hidden="true"><defs><linearGradient id="dg-i1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#312e81"/><stop offset="1" stop-color="#0e7490"/></linearGradient></defs><rect width="72" height="72" rx="18" fill="url(#dg-i1)"/><path d="M44 18a16 16 0 1 0 10 28.5A18 18 0 0 1 44 18z" fill="#fef3c7"/><circle cx="23" cy="22" r="2" fill="#fff"/><circle cx="31" cy="15" r="1.4" fill="#fff"/></svg>
    <div class="dg-body">
      <h3 class="dg-title"><a href="#" class="text-decoration-none">Stillwater: Sleep Sounds</a></h3>
      <p class="dg-sub">Phone · tablet · watch</p>
      <p class="dg-rating"><span class="dg-stars" style="--r:4.6" aria-hidden="true">★★★★★</span><span class="visually-hidden">Rated 4.6 out of 5, 12,400 ratings</span><span aria-hidden="true">4.6 (12.4k)</span></p>
    </div>
    <div class="dg-buy">
      <span class="dg-iap">One-time purchase · no ads</span>
      <button type="button" class="btn dg-get">$4.99<span class="visually-hidden">, buy Stillwater: Sleep Sounds</span></button>
    </div>
  </article></li>
  <li class="col"><article class="card h-100 dg-app">
    <svg class="dg-icon" viewBox="0 0 72 72" aria-hidden="true"><defs><linearGradient id="dg-i2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#16a34a"/><stop offset="1" stop-color="#065f46"/></linearGradient></defs><rect width="72" height="72" rx="18" fill="url(#dg-i2)"/><rect x="18" y="38" width="8" height="16" rx="2" fill="#fff"/><rect x="32" y="28" width="8" height="26" rx="2" fill="#fff"/><rect x="46" y="18" width="8" height="36" rx="2" fill="#bbf7d0"/></svg>
    <div class="dg-body">
      <h3 class="dg-title"><a href="#" class="text-decoration-none">Pocket Ledger: Budget Planner</a></h3>
      <p class="dg-sub">Phone · tablet · web</p>
      <p class="dg-rating"><span class="dg-stars" style="--r:4.4" aria-hidden="true">★★★★★</span><span class="visually-hidden">Rated 4.4 out of 5, 3,870 ratings</span><span aria-hidden="true">4.4 (3.9k)</span></p>
    </div>
    <div class="dg-buy">
      <span class="dg-iap">Free · Pro plan $2.99/mo</span>
      <button type="button" class="btn dg-get">Get<span class="visually-hidden"> Pocket Ledger: Budget Planner, free</span></button>
    </div>
  </article></li>
</ul></div>
CSS 
/* Digital product cards on Bootstrap: .card course and download cards with .badge flags, and app listings,
   in a .row-cols-* grid. Course meta, format chips and the instant-download note sell what a photo cannot. */
.dg{--dg-ink:#1e1b4b;--dg-muted:#4c4f6b;--dg-line:#e4e4f0;--dg-accent:#6d28d9;--dg-accent-hover:#5b21b6;--dg-soft:#f1ecfd;--dg-star:#d97706;--dg-star-off:#d4d4dc;--dg-focus:#2563eb;
  --bs-gutter-x:22px;--bs-gutter-y:22px}
.dg .card{--bs-card-border-color:var(--dg-line);--bs-card-border-radius:18px;--bs-card-inner-border-radius:17px;overflow:hidden}
.dg-cover{position:relative;aspect-ratio:16/9;background:#2e1065;overflow:hidden}
.dg-cover img{display:block;width:100%;height:100%;object-fit:cover}
.dg-level{position:absolute;line-height:1.5;left:12px;bottom:12px;padding:3px 10px;border-radius:6px;background:rgba(17,12,46,.82);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.dg-flag{position:absolute;line-height:1.5;top:12px;left:12px;padding:3px 10px;border-radius:6px;background:#fde68a;color:#713f12;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.dg-body{display:flex;flex:1;flex-direction:column;gap:8px;padding:18px 20px 20px}
.dg-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-size:.78rem;font-weight:600;color:var(--dg-muted)}
.dg-meta li{display:flex;align-items:center;gap:5px}
.dg-meta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dg-title{margin:0;font-size:1.1rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.dg-title a{color:var(--dg-ink);text-decoration:none}
.dg-title a:hover{text-decoration:underline;text-underline-offset:3px}
.dg-by{display:flex;align-items:center;gap:8px;margin:0;font-size:.82rem;color:var(--dg-muted)}
.dg-avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--dg-soft);color:var(--dg-accent);font-size:.68rem;font-weight:800}
.dg-rating{display:flex;align-items:center;gap:6px;margin:0;font-size:.8rem;color:var(--dg-muted)}
.dg-stars{--r:5;font-size:.9rem;letter-spacing:1px;line-height:1;color:transparent;
  background:linear-gradient(90deg,var(--dg-star) calc(var(--r) / 5 * 100%),var(--dg-star-off) 0);-webkit-background-clip:text;background-clip:text}
.dg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.dg-chips li{padding:2px 9px;border-radius:6px;background:var(--dg-soft);color:#4c1d95;font-size:.72rem;font-weight:700;letter-spacing:.03em}
.dg-note{display:flex;align-items:center;gap:6px;margin:0;font-size:.8rem;font-weight:600;color:#166534}
.dg-note svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dg-buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--dg-line)}
.dg-price{display:flex;align-items:baseline;gap:8px;margin:0;font-size:1.3rem;font-weight:800;color:var(--dg-ink)}
.dg-price s{font-size:.85rem;font-weight:500;color:var(--dg-muted)}
.dg-add{--bs-btn-padding-x:18px;--bs-btn-padding-y:10px;--bs-btn-font-size:.88rem;--bs-btn-font-weight:700;--bs-btn-border-radius:10px;--bs-btn-color:#fff;--bs-btn-bg:var(--dg-accent);--bs-btn-border-color:var(--dg-accent);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--dg-accent-hover);--bs-btn-hover-border-color:var(--dg-accent-hover);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--dg-accent-hover);--bs-btn-active-border-color:var(--dg-accent-hover);white-space:nowrap}
/* App listing */
.dg .card.dg-app{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:20px}
.dg-icon{display:block;width:72px;height:72px;border-radius:18px}
.dg-app .dg-body{padding:0;gap:6px}
.dg-app .dg-title{font-size:1.02rem}
.dg-sub{margin:0;font-size:.82rem;color:var(--dg-muted)}
.dg-app .dg-buy{grid-column:1 / -1;padding-top:14px}
.dg-get{--bs-btn-padding-x:20px;--bs-btn-padding-y:8px;--bs-btn-font-size:.88rem;--bs-btn-font-weight:800;--bs-btn-border-radius:999px;--bs-btn-border-width:0;--bs-btn-color:var(--dg-accent);--bs-btn-bg:var(--dg-soft);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--dg-accent);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--dg-accent)}
.dg-iap{font-size:.75rem;font-weight:500;color:var(--dg-muted)}
.dg :is(a,.btn):focus-visible{outline:3px solid var(--dg-focus);outline-offset:2px;box-shadow:none}
@media (prefers-reduced-motion:reduce){.dg .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4c4f6b] uppercase">Online course cards</span>
<ul class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-[22px] max-sm:grid-cols-1">
  <li><article class="flex h-full flex-col overflow-hidden rounded-[18px] border border-[#e4e4f0] bg-white">
    <div class="relative aspect-video overflow-hidden bg-[#2e1065]"><img class="block size-full object-cover" src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=700&q=70" alt="Close-up of colourful JavaScript and HTML code on a dark editor screen" width="700" height="394" loading="lazy"><span class="absolute top-3 left-3 rounded-md bg-[#fde68a] px-2.5 py-[3px] text-[.72rem] font-extrabold tracking-[.04em] text-[#713f12] uppercase">Bestseller</span><span class="absolute bottom-3 left-3 rounded-md bg-[rgba(17,12,46,.82)] px-2.5 py-[3px] text-[.72rem] font-bold tracking-[.04em] text-white">Beginner</span></div>
    <div class="flex flex-1 flex-col gap-2 px-5 pt-[18px] pb-5">
      <ul class="flex flex-wrap gap-x-3.5 gap-y-1 text-[.78rem] font-semibold text-[#4c4f6b]">
        <li class="flex items-center gap-[5px]"><svg class="size-[15px] fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9.5l4.5 2.5-4.5 2.5z"/></svg>38 lessons</li>
        <li class="flex items-center gap-[5px]"><svg class="size-[15px] fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>9 h 20 min</li>
        <li class="flex items-center gap-[5px]"><svg class="size-[15px] fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h16M7 15l3-3 3 3 4-5"/></svg>6 projects</li>
      </ul>
      <h3 class="text-[1.1rem] leading-[1.3] font-bold tracking-[-.01em]"><a href="#" class="underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb]">Modern JavaScript from Zero</a></h3>
      <p class="flex items-center gap-2 text-[.82rem] text-[#4c4f6b]"><span class="grid size-[26px] place-items-center rounded-full bg-[#f1ecfd] text-[.68rem] font-extrabold text-[#6d28d9]" aria-hidden="true">MO</span>Mara Okafor, front-end lead</p>
      <p class="flex items-center gap-1.5 text-[.8rem] text-[#4c4f6b]"><span class="bg-[linear-gradient(90deg,#d97706_96%,#d4d4dc_0)] bg-clip-text text-[.9rem] leading-none tracking-[1px] text-transparent" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.8 out of 5, 2,140 reviews</span><span aria-hidden="true">4.8 (2,140)</span></p>
      <div class="mt-auto flex items-center justify-between gap-3 border-t border-[#e4e4f0] pt-3.5">
        <p class="flex items-baseline gap-2 text-[1.3rem] font-extrabold"><span class="sr-only">Sale price</span>$39 <s class="text-[.85rem] font-medium text-[#4c4f6b]"><span class="sr-only">Was</span> $89</s></p>
        <button type="button" class="cursor-pointer rounded-[10px] bg-[#6d28d9] px-[18px] py-2.5 text-[.88rem] font-bold whitespace-nowrap text-white transition-colors duration-150 hover:bg-[#5b21b6] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none">Add<span class="sr-only"> Modern JavaScript from Zero</span> to cart</button>
      </div>
    </div>
  </article></li>
  <li><article class="flex h-full flex-col overflow-hidden rounded-[18px] border border-[#e4e4f0] bg-white">
    <div class="relative aspect-video overflow-hidden bg-[#2e1065]"><img class="block size-full object-cover" src="https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=700&q=70" alt="Hands drawing a forest scene with a stylus on a graphics tablet next to a laptop" width="700" height="394" loading="lazy"><span class="absolute bottom-3 left-3 rounded-md bg-[rgba(17,12,46,.82)] px-2.5 py-[3px] text-[.72rem] font-bold tracking-[.04em] text-white">Intermediate</span></div>
    <div class="flex flex-1 flex-col gap-2 px-5 pt-[18px] pb-5">
      <ul class="flex flex-wrap gap-x-3.5 gap-y-1 text-[.78rem] font-semibold text-[#4c4f6b]">
        <li class="flex items-center gap-[5px]"><svg class="size-[15px] fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9.5l4.5 2.5-4.5 2.5z"/></svg>24 lessons</li>
        <li class="flex items-center gap-[5px]"><svg class="size-[15px] fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>6 h 40 min</li>
        <li class="flex items-center gap-[5px]"><svg class="size-[15px] fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h16M7 15l3-3 3 3 4-5"/></svg>Brush pack included</li>
      </ul>
      <h3 class="text-[1.1rem] leading-[1.3] font-bold tracking-[-.01em]"><a href="#" class="underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb]">Digital Painting: Light and Colour</a></h3>
      <p class="flex items-center gap-2 text-[.82rem] text-[#4c4f6b]"><span class="grid size-[26px] place-items-center rounded-full bg-[#f1ecfd] text-[.68rem] font-extrabold text-[#6d28d9]" aria-hidden="true">JL</span>Jonas Lind, concept artist</p>
      <p class="flex items-center gap-1.5 text-[.8rem] text-[#4c4f6b]"><span class="bg-[linear-gradient(90deg,#d97706_94%,#d4d4dc_0)] bg-clip-text text-[.9rem] leading-none tracking-[1px] text-transparent" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.7 out of 5, 860 reviews</span><span aria-hidden="true">4.7 (860)</span></p>
      <div class="mt-auto flex items-center justify-between gap-3 border-t border-[#e4e4f0] pt-3.5">
        <p class="flex items-baseline gap-2 text-[1.3rem] font-extrabold">$59</p>
        <button type="button" class="cursor-pointer rounded-[10px] bg-[#6d28d9] px-[18px] py-2.5 text-[.88rem] font-bold whitespace-nowrap text-white transition-colors duration-150 hover:bg-[#5b21b6] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none">Add<span class="sr-only"> Digital Painting: Light and Colour</span> to cart</button>
      </div>
    </div>
  </article></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4c4f6b] uppercase">Digital downloads</span>
<ul class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-[22px] max-sm:grid-cols-1">
  <li><article class="flex h-full flex-col overflow-hidden rounded-[18px] border border-[#e4e4f0] bg-white">
    <div class="relative aspect-video overflow-hidden bg-[#2e1065]"><img class="block size-full object-cover" src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?auto=format&fit=crop&w=700&q=70" alt="Open paperback book on a white bedsheet beside a latte and reading glasses" width="700" height="394" loading="lazy"></div>
    <div class="flex flex-1 flex-col gap-2 px-5 pt-[18px] pb-5">
      <ul class="flex flex-wrap gap-1.5" aria-label="Formats"><li class="rounded-md bg-[#f1ecfd] px-[9px] py-0.5 text-[.72rem] font-bold tracking-[.03em] text-[#4c1d95]">PDF</li><li class="rounded-md bg-[#f1ecfd] px-[9px] py-0.5 text-[.72rem] font-bold tracking-[.03em] text-[#4c1d95]">EPUB</li><li class="rounded-md bg-[#f1ecfd] px-[9px] py-0.5 text-[.72rem] font-bold tracking-[.03em] text-[#4c1d95]">Large print</li></ul>
      <h3 class="text-[1.1rem] leading-[1.3] font-bold tracking-[-.01em]"><a href="#" class="underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb]">The Slow Kitchen: 60 Weeknight Recipes</a></h3>
      <p class="text-[.82rem] text-[#4c4f6b]">212 pages · 48 photographs · metric and US units</p>
      <p class="flex items-center gap-1.5 text-[.8rem] font-semibold text-[#166534]"><svg class="size-4 fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>Instant download after checkout</p>
      <div class="mt-auto flex items-center justify-between gap-3 border-t border-[#e4e4f0] pt-3.5">
        <p class="flex items-baseline gap-2 text-[1.3rem] font-extrabold">$14</p>
        <button type="button" class="cursor-pointer rounded-[10px] bg-[#6d28d9] px-[18px] py-2.5 text-[.88rem] font-bold whitespace-nowrap text-white transition-colors duration-150 hover:bg-[#5b21b6] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none">Add<span class="sr-only"> The Slow Kitchen e-book</span> to cart</button>
      </div>
    </div>
  </article></li>
  <li><article class="flex h-full flex-col overflow-hidden rounded-[18px] border border-[#e4e4f0] bg-white">
    <div class="relative aspect-video overflow-hidden bg-[#2e1065]"><img class="block size-full object-cover" src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?auto=format&fit=crop&w=700&q=70" alt="Photographer tossing a camera into the air in an autumn forest" width="700" height="394" loading="lazy"><span class="absolute top-3 left-3 rounded-md bg-[#fde68a] px-2.5 py-[3px] text-[.72rem] font-extrabold tracking-[.04em] text-[#713f12] uppercase">New</span></div>
    <div class="flex flex-1 flex-col gap-2 px-5 pt-[18px] pb-5">
      <ul class="flex flex-wrap gap-1.5" aria-label="Formats"><li class="rounded-md bg-[#f1ecfd] px-[9px] py-0.5 text-[.72rem] font-bold tracking-[.03em] text-[#4c1d95]">XMP</li><li class="rounded-md bg-[#f1ecfd] px-[9px] py-0.5 text-[.72rem] font-bold tracking-[.03em] text-[#4c1d95]">DNG</li><li class="rounded-md bg-[#f1ecfd] px-[9px] py-0.5 text-[.72rem] font-bold tracking-[.03em] text-[#4c1d95]">Desktop and mobile</li></ul>
      <h3 class="text-[1.1rem] leading-[1.3] font-bold tracking-[-.01em]"><a href="#" class="underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb]">Autumn Film Presets, Vol. 2</a></h3>
      <p class="text-[.82rem] text-[#4c4f6b]">16 presets · warm, faded and matte looks · install guide</p>
      <p class="flex items-center gap-1.5 text-[.8rem] font-semibold text-[#166534]"><svg class="size-4 fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>Instant download after checkout</p>
      <div class="mt-auto flex items-center justify-between gap-3 border-t border-[#e4e4f0] pt-3.5">
        <p class="flex items-baseline gap-2 text-[1.3rem] font-extrabold">$24</p>
        <button type="button" class="cursor-pointer rounded-[10px] bg-[#6d28d9] px-[18px] py-2.5 text-[.88rem] font-bold whitespace-nowrap text-white transition-colors duration-150 hover:bg-[#5b21b6] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none">Add<span class="sr-only"> Autumn Film Presets, Vol. 2</span> to cart</button>
      </div>
    </div>
  </article></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4c4f6b] uppercase">App listings</span>
<ul class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-[22px] max-sm:grid-cols-1">
  <li><article class="grid h-full grid-cols-[72px_1fr] gap-4 rounded-[18px] border border-[#e4e4f0] bg-white p-5">
    <svg class="block size-[72px] rounded-[18px]" viewBox="0 0 72 72" aria-hidden="true"><defs><linearGradient id="dg-i1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#312e81"/><stop offset="1" stop-color="#0e7490"/></linearGradient></defs><rect width="72" height="72" rx="18" fill="url(#dg-i1)"/><path d="M44 18a16 16 0 1 0 10 28.5A18 18 0 0 1 44 18z" fill="#fef3c7"/><circle cx="23" cy="22" r="2" fill="#fff"/><circle cx="31" cy="15" r="1.4" fill="#fff"/></svg>
    <div class="flex flex-col gap-1.5">
      <h3 class="text-[1.02rem] leading-[1.3] font-bold tracking-[-.01em]"><a href="#" class="underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb]">Stillwater: Sleep Sounds</a></h3>
      <p class="text-[.82rem] text-[#4c4f6b]">Phone · tablet · watch</p>
      <p class="flex items-center gap-1.5 text-[.8rem] text-[#4c4f6b]"><span class="bg-[linear-gradient(90deg,#d97706_92%,#d4d4dc_0)] bg-clip-text text-[.9rem] leading-none tracking-[1px] text-transparent" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.6 out of 5, 12,400 ratings</span><span aria-hidden="true">4.6 (12.4k)</span></p>
    </div>
    <div class="col-span-full flex items-center justify-between gap-3 border-t border-[#e4e4f0] pt-3.5">
      <span class="text-xs text-[#4c4f6b]">One-time purchase · no ads</span>
      <button type="button" class="flex cursor-pointer items-center gap-2 rounded-full bg-[#f1ecfd] px-5 py-2 text-[.88rem] font-extrabold text-[#6d28d9] transition-colors duration-150 hover:bg-[#6d28d9] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none">$4.99<span class="sr-only">, buy Stillwater: Sleep Sounds</span></button>
    </div>
  </article></li>
  <li><article class="grid h-full grid-cols-[72px_1fr] gap-4 rounded-[18px] border border-[#e4e4f0] bg-white p-5">
    <svg class="block size-[72px] rounded-[18px]" viewBox="0 0 72 72" aria-hidden="true"><defs><linearGradient id="dg-i2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#16a34a"/><stop offset="1" stop-color="#065f46"/></linearGradient></defs><rect width="72" height="72" rx="18" fill="url(#dg-i2)"/><rect x="18" y="38" width="8" height="16" rx="2" fill="#fff"/><rect x="32" y="28" width="8" height="26" rx="2" fill="#fff"/><rect x="46" y="18" width="8" height="36" rx="2" fill="#bbf7d0"/></svg>
    <div class="flex flex-col gap-1.5">
      <h3 class="text-[1.02rem] leading-[1.3] font-bold tracking-[-.01em]"><a href="#" class="underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb]">Pocket Ledger: Budget Planner</a></h3>
      <p class="text-[.82rem] text-[#4c4f6b]">Phone · tablet · web</p>
      <p class="flex items-center gap-1.5 text-[.8rem] text-[#4c4f6b]"><span class="bg-[linear-gradient(90deg,#d97706_88%,#d4d4dc_0)] bg-clip-text text-[.9rem] leading-none tracking-[1px] text-transparent" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.4 out of 5, 3,870 ratings</span><span aria-hidden="true">4.4 (3.9k)</span></p>
    </div>
    <div class="col-span-full flex items-center justify-between gap-3 border-t border-[#e4e4f0] pt-3.5">
      <span class="text-xs text-[#4c4f6b]">Free · Pro plan $2.99/mo</span>
      <button type="button" class="flex cursor-pointer items-center gap-2 rounded-full bg-[#f1ecfd] px-5 py-2 text-[.88rem] font-extrabold text-[#6d28d9] transition-colors duration-150 hover:bg-[#6d28d9] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none">Get<span class="sr-only"> Pocket Ledger: Budget Planner, free</span></button>
    </div>
  </article></li>
</ul></div>

About this set

Cards for things that are never shipped: online courses, downloads and apps, where the details have to do the selling a product photo would. Online course cards put a 16:9 cover with a level label and a Bestseller flag above a row of facts with icons, lessons, running time and projects, then the course title, the instructor with an initials avatar, the rating and a footer with the price and an Add to cart button. Digital downloads show an e-book and a photo preset pack with their file formats as small chips, the page or preset count, and a green Instant download after checkout line above the price. App listings use an inline SVG icon instead of a photo, with the app name, the devices it runs on, the rating with a shortened count such as 12.4k, a pricing note such as One-time purchase, no ads, and a pill buy button showing the price or Get for a free app. All three share one card frame, so they can sit in the same grid on a marketplace page. The Bootstrap version uses .card, .badge and .btn, and the Tailwind version uses the same structure in utility classes.

What’s included

  • Course cards with lessons, duration, level and instructor
  • Download cards with file-format chips and an instant-download note
  • App listings with inline SVG icons and a pill buy button
  • Sale price with the original struck through
  • One card frame shared by all three layouts

Accessibility

Buttons carry the product in their names, such as Add Modern JavaScript from Zero to cart, $4.99, buy Stillwater: Sleep Sounds, and Get Pocket Ledger: Budget Planner, free. The format chips are a list named Formats, decorative icons and initials avatars are hidden from screen readers, and ratings are read as Rated 4.8 out of 5, 2,140 reviews. Every button and link has a 3px focus outline, and colour transitions stop under prefers-reduced-motion.

Customise it

Change --dg-accent, --dg-soft and --dg-focus on .dg for the colour scheme, and the 16:9 aspect ratio of .dg-cover. Each app icon is an inline SVG gradient you can recolour. In Tailwind edit the bg-[#6d28d9] and bg-[#f1ecfd] utilities.