Компоненты электронной коммерции

Компонент компонентов электронной коммерции

Бруталистский компонент электронной коммерции для блога, отличающийся яркой цветовой гаммой и умеренной сложностью. Он включает в себя адаптивный дизайн с поддержкой темной темы с использованием Tailwind CSS.

Открыть предварительный просмотр

                <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>

Компонент компонентов электронной коммерции

Компонент электронной коммерции для минималистичного бизнес-сайта, с адаптивным дизайном и поддержкой темных тем.

Открыть предварительный просмотр

                <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>

Компонент компонентов электронной коммерции

Адаптивный компонент электронной коммерции, предназначенный для темного режима с триадической цветовой схемой, включающей списки товаров, иконку корзины покупок и аватар пользователя.

Открыть предварительный просмотр

                <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>

Ретро-монохромный-товар-сетка

Простой отзывчивый компонент сетки товаров для электронной коммерции в стиле ретро/винтаж, выполненный в монохроматической фиолетовой палитре с поддержкой темных тем. Дизайн вызывает ностальгию по 80-м/90-м годам благодаря простому макету и минимальному количеству элементов, идеально подходящих для покупок в Интернете.

Открыть предварительный просмотр

                <!-- 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>

Компонент панели управления электронной коммерции

Компонент панели управления электронной коммерции со скевоморфизмом, яркими цветами и простой версткой для Tailwind CSS, с адаптивной и темной поддержкой тем.

Открыть предварительный просмотр

                <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>

Ретро-компонент для электронной коммерции

Сложный компонент электронной коммерции, выполненный в стиле ретро/винтаж, с триадической цветовой гаммой и адаптивным дизайном, подходит для бизнес/корпоративных сайтов с поддержкой темного режима.

Открыть предварительный просмотр

                <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>

Компонент электронной коммерции

Отзывчивый компонент электронной коммерции, стилизованный под стеклянный морфизм и пастельные тона, подходящий для интерфейсов социальных сетей, с поддержкой темных тем.

Открыть предварительный просмотр

                <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>

Компонент компонентов электронной коммерции

Отзывчивый компонент электронной коммерции с микровзаимодействиями, цветовой схемой земляных тонов, умеренной сложностью и поддержкой темного режима.

Открыть предварительный просмотр

                <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>