Компоненты Корзину Компонент корзины покупок

Компонент корзины покупок

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

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

HTML-код

<div class="p-4 bg-white dark:bg-gray-800 rounded-lg">
  <h2 class="text-xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Shopping Cart</h2>
  <div class="space-y-4">
    <!-- Cart Item -->
    <div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://picsum.photos/seed/item1/50/50" alt="Product Image" class="rounded mr-4">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 1</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$19.99</p>
        </div>
      </div>
      <div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
        x1
      </div>
    </div>
    <!-- Cart Item -->
    <div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://picsum.photos/seed/item2/50/50" alt="Product Image" class="rounded mr-4">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 2</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$29.50</p>
        </div>
      </div>
      <div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
        x2
      </div>
    </div>
  </div>
  <div class="flex justify-between items-center mt-6">
    <p class="text-lg font-bold text-gray-800 dark:text-gray-200">Total:</p>
    <p class="text-lg font-bold text-indigo-600 dark:text-indigo-400">$78.98</p>
  </div>
  <button class="mt-6 w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded-md transition duration-300">
    Checkout
  </button>
</div>

Связанные компоненты

Компонент корзины покупок

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

Открытый

Компонент корзины покупок

Простой адаптивный компонент корзины покупок с дизайном Neumorphism и дополнительной цветовой схемой для поддержки темной темы.

Открытый

Нейроморфная корзина для покупок

Компонент тележки Neumorphic с использованием триадической цветовой схемы. Имеет умеренную сложность, предназначен для деловых/корпоративных сайтов. Компонент является отзывчивым и включает поддержку темного режима с использованием префикса dark: от Tailwind. Включает заполнители для товаров с указанием количества и цены, промежуточный итог и кнопку оформления заказа. Использует picsum.photos для изображений товаров.

Открытый