Компонент корзины покупок
Простой, отзывчивый компонент корзины покупок с ретро/винтажным дизайном, дополнительной цветовой схемой и поддержкой темного режима, созданный с использованием Tailwind CSS.
HTML-код
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
<div class="space-y-4">
<!-- Cart Item -->
<div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro1/100/100" alt="Product Image">
<div>
<h3 class="text-gray-800 dark:text-white font-medium">Retro T-Shirt</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">Size: L</p>
</div>
</div>
<div class="text-gray-700 dark:text-gray-200 font-semibold">$29.99</div>
</div>
<!-- Cart Item -->
<div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro2/100/100" alt="Product Image">
<div>
<h3 class="text-gray-800 dark:text-white font-medium">Vintage Jeans</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">Size: 32</p>
</div>
</div>
<div class="text-gray-700 dark:text-gray-200 font-semibold">$59.99</div>
</div>
</div>
<div class="flex justify-between items-center mt-6">
<div class="text-xl font-bold text-gray-800 dark:text-white">Total:</div>
<div class="text-xl font-bold text-gray-800 dark:text-white">$89.98</div>
</div>
<button class="mt-6 w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded dark:bg-teal-500 dark:hover:bg-teal-600 filter sepia">Checkout</button>
</div>
</div>Связанные компоненты
Компонент корзины покупок
Простой и минималистичный компонент корзины покупок с использованием Tailwind CSS, с цветовой гаммой земляных тонов, назначением для социальных сетей и поддержкой темных тем. Он является адаптивным и включает примеры элементов. Этот компонент предназначен для базового отображения с минимальным количеством элементов и без JavaScript.
Компонент корзины покупок
Адаптивный компонент корзины, разработанный в стиле Neumorphism с использованием Tailwind CSS, подходит для интерфейсов социальных сетей с поддержкой темных тем.
Компонент корзины покупок
Отзывчивая корзина покупок, выполненная в стиле брутализм, отличающаяся высокой контрастностью и необычной компоновкой. Он поддерживает темную тему с Tailwind CSS.