Componentes de comercio electrónico

Componente de componentes de comercio electrónico

Un componente de comercio electrónico brutalista para un blog, con una combinación de colores vibrantes y una complejidad moderada. Incluye un diseño responsivo con soporte para temas oscuros utilizando Tailwind CSS.

Abrir vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center font-mono">

  <!-- Product Card -->
  <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 mb-8 max-w-sm w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
    <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
    <h3 class="text-2xl font-bold text-black dark:text-white mb-2">Disruptor X1</h3>
    <p class="text-black dark:text-white mb-4">Unleash the power of raw computing. This machine doesn't just run; it detonates.</p>
    <div class="flex justify-between items-center mb-4">
      <span class="text-3xl font-bold text-red-600 dark:text-red-400">$999.99</span>
      <button class="bg-yellow-400 text-black dark:bg-yellow-600 dark:text-white border-4 border-black dark:border-white px-6 py-3 font-bold text-lg hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">BUY NOW</button>
    </div>
  </div>

  <!-- Another Product Card -->
  <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 mb-8 max-w-sm w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
    <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
    <h3 class="text-2xl font-bold text-black dark:text-white mb-2">Axiom Z2</h3>
    <p class="text-black dark:text-white mb-4">Experience sound like never before. Pure, unadulterated audio assault.</p>
    <div class="flex justify-between items-center mb-4">
      <span class="text-3xl font-bold text-green-600 dark:text-green-400">$249.99</span>
      <button class="bg-yellow-400 text-black dark:bg-yellow-600 dark:text-white border-4 border-black dark:border-white px-6 py-3 font-bold text-lg hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">GRAB IT</button>
    </div>
  </div>

  <!-- Blog Post Snippet (acting as related content/upsell) -->
  <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 max-w-lg w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
    <h4 class="text-xl font-bold text-black dark:text-white mb-3">READ: The Philosophy of Brutalist Tech</h4>
    <img src="https://picsum.photos/400/200?random=3" alt="Blog Post Image" class="w-full h-32 object-cover border-4 border-black dark:border-white mb-4">
    <p class="text-black dark:text-white text-sm mb-4">Dive deep into the design principles that make our products unapologetically bold and functional.</p>
    <a href="#" class="text-blue-700 dark:text-blue-300 underline font-bold hover:text-blue-900 dark:hover:text-blue-500">Continue Reading &rarr;</a>

    <div class="mt-6 pt-4 border-t-2 border-black dark:border-white flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-white mr-4">
      <div>
        <p class="font-bold text-black dark:text-white">J.D. Brutal</p>
        <p class="text-sm text-gray-700 dark:text-gray-300">Tech Alchemist</p>
      </div>
    </div>
  </div>

  <!-- Responsive Adjustments -->
  <div class="mt-8 text-center text-gray-700 dark:text-gray-300 text-sm">
    <p>Resize your browser to see responsiveness!</p>
    <p>Dark mode toggles automatically based on system preference.</p>
  </div>

</div>

Componente de componentes de comercio electrónico

Componente de comercio electrónico para un sitio web comercial minimalista, con diseño responsivo y soporte de temas oscuros.

Abrir vista previa

                <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold mb-4">Product Title</h2>
  <img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-48 object-cover rounded-lg mb-4">
  <p class="text-lg mb-4">$99.99</p>
  <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>

Componente de componentes de comercio electrónico

Un componente de comercio electrónico receptivo diseñado para el modo oscuro con una combinación de colores triádica, con listados de productos, un icono de carrito de compras y un avatar de usuario.

Abrir vista previa

                <div class="bg-gray-900 text-white min-h-screen p-8">
    <header class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold">ShopEase</h1>
        <div class="relative">
            <button class="bg-blue-600 p-2 rounded-full hover:bg-blue-500 focus:outline-none">
                <svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 2H7v2h6a1 1 0 011 1v12a1 1 0 01-1 1H7a1 1 0 01-1-1v-6H4v7a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"/></svg>
            </button>
            <span class="absolute top-0 right-0 bg-red-600 text-white text-xs font-bold rounded-full px-1">3</span>
        </div>
    </header>

    <main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-semibold">Product Title</h2>
                <p class="text-gray-400">$29.99</p>
                <button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
            </div>
        </div>
        
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-semibold">Another Product</h2>
                <p class="text-gray-400">$54.99</p>
                <button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
            </div>
        </div>
        
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-semibold">Cool Gadget</h2>
                <p class="text-gray-400">$19.99</p>
                <button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
            </div>
        </div>
    </main>

    <footer class="mt-10 text-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mx-auto mb-2">
        <p class="font-semibold">Welcome, User!</p>
    </footer>
</div>

rejilla de productos retro-monocromo

Un componente de cuadrícula de productos de comercio electrónico retro/vintage simple y receptivo diseñado en una paleta violeta monocromática con soporte para temas oscuros. El diseño evoca la nostalgia de los años 80/90 con un diseño básico y elementos mínimos, perfecto para las experiencias de compra en línea.

Abrir vista previa

                <!-- Retro Monochromatic E-Commerce Product Grid -->
<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
      <img src="https://picsum.photos/seed/p1/300/200" alt="Retro T-Shirt" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
      <h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Retro T-Shirt</h2>
      <p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$29.99</p>
      <button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
        <span class="text-sm text-violet-900 dark:text-violet-100">VintageCo</span>
      </div>
    </div>
    <!-- Product Card 2 -->
    <div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
      <img src="https://picsum.photos/seed/p2/300/200" alt="Vintage Camera" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
      <h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Vintage Camera</h2>
      <p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$149.00</p>
      <button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
        <span class="text-sm text-violet-900 dark:text-violet-100">90sShop</span>
      </div>
    </div>
    <!-- Product Card 3 -->
    <div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
      <img src="https://picsum.photos/seed/p3/300/200" alt="Cassette Player" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
      <h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Cassette Player</h2>
      <p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$49.50</p>
      <button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/lego/3.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
        <span class="text-sm text-violet-900 dark:text-violet-100">RetroWave</span>
      </div>
    </div>
  </div>
</div>

Componente de panel de comercio electrónico

Componente de panel de comercio electrónico con skeuomorfismo, colores vibrantes y diseño simple para Tailwind CSS, con soporte de tema oscuro y receptivo.

Abrir vista previa

                <div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl max-w-sm mx-auto">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Dashboard Overview</h2>
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Total Sales</p>
        <p class="text-lg font-semibold text-green-600 dark:text-green-400">$5,200</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  </div>
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-8m8 0l-5 2v-2m5 0z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">New orders</p>
        <p class="text-lg font-semibold text-orange-600 dark:text-orange-400">150</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  </div>
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h.01M17 9l2 2m0 0l2-2m-2 2v-2v2z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Pending Issues</p>
        <p class="text-lg font-semibold text-red-600 dark:text-red-400">12</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  </div>
</div>

Componente retro de comercio electrónico

Un componente complejo de comercio electrónico diseñado con un estilo retro / vintage, con un esquema de color triádico y un diseño receptivo, adecuado para sitios web comerciales / corporativos con soporte de modo oscuro.

Abrir vista previa

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <div class="mb-4">
        <h2 class="text-3xl font-bold text-center text-red-600 dark:text-red-400">Vintage E-commerce Store</h2>
        <p class="text-center text-lg text-gray-700 dark:text-gray-300">Explore our curated collection of retro-inspired products</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Retro Gadget</h3>
                <p class="text-gray-600 dark:text-gray-400">Classic retro gadget from the 90s, perfect for nostalgia lovers!</p>
                <span class="block text-lg font-bold text-red-600 dark:text-red-400">$29.99</span>
                <button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Vintage Vinyl</h3>
                <p class="text-gray-600 dark:text-gray-400">Experience music like it's the 80s with our vintage vinyl collection.</p>
                <span class="block text-lg font-bold text-red-600 dark:text-red-400">$19.99</span>
                <button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Classic Arcade Game</h3>
                <p class="text-gray-600 dark:text-gray-400">Relive the golden age of gaming with our classic arcade machines!</p>
                <span class="block text-lg font-bold text-red-600 dark:text-red-400">$99.99</span>
                <button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h2 class="text-2xl font-bold text-center text-red-600 dark:text-red-400">Meet Our Team</h2>
        <div class="flex flex-wrap justify-center space-x-4 mt-4">
            <div class="flex flex-col items-center">
                <img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member 1">
                <h4 class="mt-2 text-gray-800 dark:text-gray-200">John Doe</h4>
            </div>
            <div class="flex flex-col items-center">
                <img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member 2">
                <h4 class="mt-2 text-gray-800 dark:text-gray-200">Jane Smith</h4>
            </div>
            <div class="flex flex-col items-center">
                <img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Team Member 3">
                <h4 class="mt-2 text-gray-800 dark:text-gray-200">Bob Johnson</h4>
            </div>
        </div>
    </div>
</div>

Componente de comercio electrónico

Un componente de comercio electrónico receptivo con estilo Glassmorphism y colores pastel, adecuado para interfaces de redes sociales, con soporte para temas oscuros.

Abrir vista previa

                <div class="flex flex-col items-center justify-center p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-lg bg-opacity-30">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-3">Featured Products</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
            <img src="https://picsum.photos/200/300" alt="Product 1" class="mb-3 rounded-md shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 1 goes here.</p>
            <span class="font-bold text-xl text-gray-800 dark:text-gray-200">$19.99</span>
            <button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
        </div>
        <div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
            <img src="https://picsum.photos/200/301" alt="Product 2" class="mb-3 rounded-md shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 2 goes here.</p>
            <span class="font-bold text-xl text-gray-800 dark:text-gray-200">$29.99</span>
            <button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
        </div>
        <div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
            <img src="https://picsum.photos/200/302" alt="Product 3" class="mb-3 rounded-md shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 3 goes here.</p>
            <span class="font-bold text-xl text-gray-800 dark:text-gray-200">$39.99</span>
            <button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
        </div>
    </div>
    <div class="mt-5 flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-2">
            <div class="text-left">
                <p class="text-gray-800 dark:text-gray-200 font-bold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Great product! Highly recommend.</p>
            </div>
        </div>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-2">
            <div class="text-left">
                <p class="text-gray-800 dark:text-gray-200 font-bold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Loved it! Will buy again.</p>
            </div>
        </div>
    </div>
</div>

Componente de componentes de comercio electrónico

Un componente de comercio electrónico receptivo con microinteracciones, combinación de colores en tonos tierra, complejidad moderada y compatibilidad con el modo oscuro.

Abrir vista previa

                <div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row -mx-4">
      <div class="md:flex-1 px-4">
        <div class="h-[460px] rounded-lg bg-gray-300 dark:bg-gray-700 mb-4 animate-pulse"></div>
        <div class="flex -mx-2 mb-4">
          <div class="w-1/2 px-2">
            <button class="w-full bg-amber-900 dark:bg-amber-700 text-white py-2 px-4 rounded-full font-bold hover:bg-amber-800 dark:hover:bg-amber-600 transform transition duration-300 hover:scale-105">Add to Cart</button>
          </div>
          <div class="w-1/2 px-2">
            <button class="w-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-300 dark:hover:bg-gray-700 transform transition duration-300 hover:scale-105">Add to Wishlist</button>
          </div>
        </div>
      </div>
      <div class="md:flex-1 px-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Product Name Microinteraction</h2>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed
          ante justo. Integer eu eleifend erat. Quisque dapibus rupus augue,
          a dapibus velit tincidunt et. Sed sed ante justo.
        </p>

        <div class="flex mb-4">
          <div class="mr-4">
            <span class="font-bold text-gray-700 dark:text-gray-300">Price:</span>
            <span class="text-gray-600 dark:text-gray-300">$29.99</span>
          </div>
          <div>
            <span class="font-bold text-gray-700 dark:text-gray-300">Availability:</span>
            <span class="text-gray-600 dark:text-gray-300">In Stock</span>
          </div>
        </div>
        <div class="mb-4">
          <span class="font-bold text-gray-700 dark:text-gray-300">Select Color:</span>
          <div class="flex items-center mt-2">
            <button class="w-6 h-6 rounded-full bg-brown-700 dark:bg-brown-500 mr-2"></button>
            <button class="w-6 h-6 rounded-full bg-green-700 dark:bg-green-500 mr-2"></button>
            <button class="w-6 h-6 rounded-full bg-stone-700 dark:bg-stone-500"></button>
          </div>
        </div>
        <div class="mb-4">
          <span class="font-bold text-gray-700 dark:text-gray-300">Select Size:</span>
          <div class="flex items-center mt-2">
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">S</button>
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">M</button>
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">L</button>
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">XL</button>
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">XXL</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>