Cards
August 06, 2026

E-Commerce Card v1

Product card with image, favorites, ratings, color picker, sale price, and buy button.

Back to collections
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,700&display=swap" rel="stylesheet">
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<body class="bg-slate-100 min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-12 font-sans text-slate-800 antialiased">
    <div class="group relative w-full max-w-sm sm:max-w-md md:max-w-2xl lg:max-w-3xl bg-white border border-slate-200/80 rounded-3xl shadow-xl shadow-slate-200/60 overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-slate-300/50 flex flex-col md:flex-row">
        <div class="relative w-full md:w-1/2 h-64 sm:h-72 md:h-auto bg-slate-50 overflow-hidden">
            <button class="absolute top-4 right-4 z-10 w-10 h-10 rounded-full bg-white/80 border border-slate-200/80 text-slate-500 hover:text-rose-500 hover:bg-white active:scale-90 transition-all duration-200 flex items-center justify-center backdrop-blur-md cursor-pointer shadow-sm">
                <iconify-icon icon="ph:heart-bold" class="text-xl"></iconify-icon>
            </button>
            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=800&auto=format&fit=crop"
                alt="Smartwatch Minimalist"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 ease-out" />
        </div>
        <div class="w-full md:w-1/2 p-6 sm:p-8 flex flex-col justify-between space-y-6">
            <div>
                <div class="flex items-center justify-between mb-2">
                    <span class="text-xs font-semibold uppercase tracking-wider text-emerald-600">Acessórios</span>
                    <div class="flex items-center gap-1 text-amber-500 text-sm">
                        <iconify-icon icon="ph:star-fill"></iconify-icon>
                        <span class="font-bold text-slate-800 text-xs">4.8</span>
                        <span class="text-slate-400 text-xs">(94)</span>
                    </div>
                </div>
                <h2 class="text-xl sm:text-2xl font-bold text-slate-900 tracking-tight mb-2">
                    Smartwatch
                </h2>
                <p class="text-slate-500 text-xs sm:text-sm line-clamp-2 leading-relaxed">
                    Monitoramento de saúde avançado, tela OLED de alta definição e resistência à água com acabamento em
                    alumínio.
                </p>
            </div>
            <div>
                <span class="text-xs font-medium text-slate-500 block mb-2">Cores:</span>
                <div class="flex items-center gap-3">
                    <button
                        class="w-7 h-7 rounded-full bg-slate-100 border-2 border-emerald-600 ring-2 ring-emerald-600/20 active:scale-90 transition-all cursor-pointer"
                        title="Branco"></button>
                    <button
                        class="w-7 h-7 rounded-full bg-slate-800 hover:scale-110 active:scale-90 transition-all cursor-pointer"
                        title="Preto"></button>
                    <button
                        class="w-7 h-7 rounded-full bg-rose-200 hover:scale-110 active:scale-90 transition-all cursor-pointer"
                        title="Rosa"></button>
                </div>
            </div>
            <div class="pt-4 border-t border-slate-100 flex items-center justify-between gap-4">
                <div class="flex flex-col justify-center">
                    <span class="text-xs font-medium text-slate-400 line-through">R$ 1.599</span>
                    <span class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight leading-tight">R$
                        1.299</span>
                </div>
                <button class="bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white font-semibold text-sm px-4 py-3 rounded-xl shadow-lg shadow-emerald-600/20 active:scale-95 transition-all duration-200 flex items-center justify-center gap-2 shrink-0 cursor-pointer">
                    <iconify-icon icon="ph:shopping-bag-open-bold" class="text-lg"></iconify-icon>
                    <span>Adicionar</span>
                </button>
            </div>
        </div>
    </div>
</body>

Project prerequisites

To replicate this component in your development environment, make sure you have:

  • Tailwind CSS: An active installation of Tailwind CSS v3 or v4 in your project.
  • Icon library: This example uses the Iconify CDN for demonstration purposes (check the embed script box above to paste into your HTML head).
  • Custom typography: If you want to use the same font as the demo, include the corresponding Google Fonts link in your project.

How to integrate

  1. Copy the clean HTML from the main code box.
  2. Paste the structure inside the desired container or layout in your application.
  3. If the component uses blur (backdrop-blur) or transparency classes, ensure the parent element has a contrasting background for the visual effect to work properly.

Typography and font usage in your project

This component was built to adapt to your application's design system:

  • Your project's fonts: If you already have a font family configured in your Tailwind CSS, simply replace the temporary font classes with font-sans, font-serif, or font-mono on the main container. The element will automatically inherit your brand's default typography.
  • Specific fonts: If you want to use a different font just for this block, add the corresponding Tailwind utility class (e.g., font-['Plus_Jakarta_Sans']) or declare the font name in your config.

What you can customize

  • Colors and themes: Change the Tailwind utility classes (such as bg-zinc-950, text-white, border-zinc-800) to adapt the colors to your brand palette.
  • Icons: Replace the icon attribute on icon tags with any other Iconify-compatible icon name.

Production best practices

Warning:

The CDN dependencies (such as the external Iconify script and direct Google Fonts links) included in the embed box are meant for quick testing and playground demonstrations. Loading external files via CDN can negatively impact your page load speed (Core Web Vitals) and cause layout shifts (CLS).

For a professional production project, we recommend:

  1. Host fonts locally: Download the font files (.woff2 format) and include them directly in your bundle, or use automated tools like @nuxt/fonts or Fontsource. This reduces external HTTP requests and prevents render-blocking text.
  2. Internal icon package: Instead of loading the Iconify CDN script, install the icon library directly via your package manager (e.g., npm i @iconify/vue, @unplugin-icons, or native libraries like Lucide / Phosphor Icons). That way, only the icons actually used will be included in your final bundle.
Back to collections
Share this