Добавить в корзину компонент кнопки
Отзывчивая кнопка «Добавить в корзину», разработанная в темном режиме с использованием 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>Связанные компоненты
Кнопка «Добавить в корзину»
Адаптивная кнопка «Добавить в корзину», стилизованная в соответствии с принципами Material Design с использованием Tailwind CSS, с поддержкой темных тем.
брутализм пастельные тона кнопка «В корзину»
Кнопка «Добавить в корзину» в стиле брутализма с пастельной цветовой гаммой, умеренной сложностью и адаптивным дизайном с поддержкой темного режима. Подходит для блога или контентного сайта.
Добавить в корзину компонент кнопки
Компонент кнопки «Добавить в корзину» в 3D-стиле, разработанный для интерфейсов социальных сетей. Он отличается богатым интерфейсом с глубиной, привлекательными элементами дизайна и адаптивностью с поддержкой темных тем.