Компонент отображения цен 22
Минималистичный компонент отображения цен, который отображает изображение, название, цену и кнопку для добавления в корзину. Разработан с учетом отзывчивости и поддержки темных тем с использованием Tailwind CSS.
HTML-код
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h2>
<p class="text-xl text-gray-600 dark:text-gray-300">$29.99</p>
<button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300" type="button">Add to Cart</button>
</div>
</div>Связанные компоненты
Компонент отображения цен
Игривая и жизнерадостная составляющая отображения цен с округлыми элементами и аналогичной цветовой гаммой, подходит для портфолио для демонстрации работ или товаров. Он полностью адаптивный и поддерживает темный режим.
Компонент отображения цен Neumorphic
Сложный, отзывчивый и совместимый с темным режимом компонент отображения цен со стилем дизайна Neumorphism и аналогичной цветовой схемой, подходящий для потребления блогов и контента. Имеет множество интерактивных элементов, таких как переключатели и детализированные уровни.
Компонент отображения цен
Компонент отображения цен в стиле ретро/винтаж для электронной коммерции с триадической цветовой схемой. Это сложный, адаптивный дизайн с поддержкой темных тем, созданный с помощью Tailwind CSS.