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