Componentes Naipes Retro_E_commerce_Cards_Component

Retro_E_commerce_Cards_Component

Un componente de tarjeta de producto de comercio electrónico receptivo con una estética retro / vintage, tonos tierra y soporte de modo oscuro, adecuado para experiencias de compra en línea. Las características incluyen imagen del producto, nombre, precio y un botón de llamada a la acción.

Vista previa

Código HTML

<div class="font-sans bg-amber-50 dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-12 px-4 transition-colors duration-300">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center mb-12 text-stone-900 dark:text-stone-50 drop-shadow-md tracking-wider">
      Our Featured Retro Finds
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Product Card 1 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <div class="absolute top-0 left-0 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-br-lg shadow-md tracking-wider -rotate-3 transform origin-top-left group-hover:scale-110 transition-transform duration-200 z-10">
          SALE!
        </div>
        <img src="https://picsum.photos/400/300?random=1" alt="Vintage Record Player" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Vinyl Player '86</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Authentic analogue sound, built to last.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-lg font-extrabold text-amber-700 dark:text-amber-300 line-through mr-2">$299.99</p>
            <p class="text-2xl font-extrabold text-green-700 dark:text-green-400">$199.99</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=2" alt="Retro Game Console" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Pixel Console DX</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Relive 8-bit glory days, re-engineered.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$149.99</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=3" alt="Vintage Typewriter" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Classic Typewriter B4</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">For the writer who loves the tactile feel.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$249.00</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=4" alt="Old School Camera" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">SnapCam 1990</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Capture moments the classic way.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$119.50</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg shadow-md tracking-wider rotate-3 transform origin-top-right group-hover:scale-110 transition-transform duration-200 z-10">
          NEW!
        </div>
        <img src="https://picsum.photos/400/300?random=5" alt="Portable Cassette Player" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Walkman Classic</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Your favorite tunes on the go.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$89.00</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=6" alt="Boombox" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Street Blaster '92</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Bring the party wherever you go.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$175.00</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Componentes relacionados

Componente de tarjetas

Un componente de tarjeta de portafolio receptivo con un estilo de diseño brutalista, que utiliza una combinación de colores pastel y una complejidad moderada con funciones interactivas. Esta tarjeta muestra el trabajo o los productos y es compatible con el modo oscuro.

Abrir

Componente de tarjetas neumórficas

Un componente de cartas responsivo diseñado en el estilo Neumorphism con soporte para temas oscuros, con sombras sutiles y un diseño flexible.

Abrir

Componente de tarjetas de modo oscuro

Un componente de tarjetas responsivas diseñado para sitios web comerciales/corporativos con una interfaz de usuario de modo oscuro y un esquema de color en escala de grises, con una complejidad e interactividad moderadas.

Abrir