*Build an E-commerce UI — chapter 1 of 2.* Cards with price and actions.

What you will build#

The product card.

Step by step#

example
html
<div class="group rounded-2xl border overflow-hidden">
  <div class="aspect-square bg-slate-100"></div>
  <div class="p-4">
    <h3 class="font-medium">Product</h3>
    <p class="text-sm text-slate-500 line-through">$59</p>
    <p class="font-bold">$39</p>
    <button class="mt-3 w-full py-2 rounded-lg bg-slate-900 text-white text-sm opacity-0 group-hover:opacity-100 transition">Add to cart</button>
  </div>
</div>

Why it works#

aspect-square keeps tiles perfect; reveal-on-hover keeps cards clean.

Try it yourself#

  • Add badge ribbons
  • Add rating stars
  • Add quick-view

Series navigation#

tutorials/index|All tutorials · tutorials/ecommerce/cart-checkout|Cart & checkout forms →