Компонент списка желаний
Компонент списка желаний в брутальном стиле для бизнес-сайтов, отличающийся цветовой гаммой в оттенках серого и умеренной сложностью. Адаптивный дизайн с поддержкой темного режима с использованием CSS-классов Tailwind.
HTML-код
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<h2 class="text-2xl font-bold mb-4 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Wishlist</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
<img src="https://picsum.photos/seed/item1/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
<h3 class="text-xl font-bold mb-2">Product Title 1</h3>
<p class="mb-2">Short description of the product.</p>
<p class="font-bold mb-4">$99.99</p>
<button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
<div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
</div>
<div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
<img src="https://picsum.photos/seed/item2/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
<h3 class="text-xl font-bold mb-2">Product Title 2</h3>
<p class="mb-2">Short description of the product.</p>
<p class="font-bold mb-4">$149.99</p>
<button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
<div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">Out of Stock</div>
</div>
<div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
<img src="https://picsum.photos/seed/item3/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
<h3 class="text-xl font-bold mb-2">Product Title 3</h3>
<p class="mb-2">Short description of the product.</p>
<p class="font-bold mb-4">$79.99</p>
<button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
<div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
</div>
</div>
</div>Связанные компоненты
Компонент списка желаний
Адаптивный компонент списка желаний, разработанный в темном режиме с использованием Tailwind CSS. Он имеет макет карточки для элементов с изображениями, описаниями и аватарами пользователей, поддерживает темную тему и адаптивные эффекты.
Компонент списка желаний
Компонент списка желаний в стиле неоморфизма для социальных сетей с дополнительной цветовой схемой. Он включает в себя адаптивный дизайн с использованием Tailwind CSS с поддержкой темного режима. Используются только классы HTML и Tailwind, без JavaScript. Изображения взяты с сайта picsum.photos, а аватары — с сайта randomuser.me.
Компонент списка желаний
Упрощенный компонент списка желаний, стилизованный под бруталистский подход с использованием цветовой схемы в оттенках серого, предназначенный для демонстрации работ или продуктов.