Компонент списка желаний
Компонент списка желаний в брутальном стиле для бизнес-сайтов, отличающийся цветовой гаммой в оттенках серого и умеренной сложностью. Адаптивный дизайн с поддержкой темного режима с использованием 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>Связанные компоненты
Компонент списка желаний
Простой, адаптивный компонент списка желаний для бизнес/корпоративных сайтов с микровзаимодействиями. Имеет аналогичную цветовую схему (сине-зелено-бирюзовый), поддержку темных тем и тонкую анимацию наведения. Компонент отображает элементы списка желаний с изображениями товаров, названиями, ценами и кнопками действий.
Компонент списка желаний
Отзывчивый компонент списка желаний для приложений для спорта и фитнеса, включающий микровзаимодействия, высококонтрастную цветовую схему и поддержку темного режима. Пользователи могут добавлять/удалять элементы и просматривать визуальную обратную связь.
Компонент списка желаний
Компонент списка желаний со стилем 3D-дизайна, пастельной цветовой гаммой и адаптивным дизайном для бизнес-сайтов с поддержкой темного режима.