Добавить в корзину компонент кнопки
Отзывчивая кнопка «Добавить в корзину», разработанная в темном режиме с использованием Tailwind CSS, с эффектами наведения и поддержкой темной темы.
HTML-код
<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
<div class="flex flex-col items-center bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-auto rounded-lg mb-4" />
<h2 class="text-lg font-semibold mb-2">Product Name</h2>
<p class="text-gray-400 mb-4">Short description of the product goes here.</p>
<div class="flex items-center justify-between w-full">
<span class="text-xl font-bold">$19.99</span>
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
Add to Cart
</button>
</div>
</div>
</div>Связанные компоненты
Добавить в корзину компонент кнопки
Адаптивный компонент кнопки «Добавить в корзину», выполненный в брутальном стиле с яркими цветами, подходит для интерфейсов социальных сетей с поддержкой темных тем.
брутализм пастельные тона кнопка «В корзину»
Кнопка «Добавить в корзину» в стиле брутализма с пастельной цветовой гаммой, умеренной сложностью и адаптивным дизайном с поддержкой темного режима. Подходит для блога или контентного сайта.
Добавить в корзину компонент кнопки
Сложная кнопка «Добавить в корзину», разработанная в стиле ретро/винтаж и дополненная цветовая гамма, подходит для профессионального сайта компании. Этот компонент поддерживает темный режим и является адаптивным, используя Tailwind CSS для стилизации.