Компонент Карточки Товаров
Компонент карточек товаров в брутальном стиле с отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS.
HTML-код
<div class="flex flex-wrap justify-center p-4 bg-gray-100 dark:bg-gray-800">
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 1</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 2</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 3</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент Карточки Товаров
Адаптивный компонент карточки товара, выполненный в стиле Material Design, с цветовой гаммой в оттенках серого. Он включает в себя изображение, заголовок, описание и кнопку с поддержкой темного режима с использованием Tailwind CSS.
Компонент Карточки Товаров
Карточки товаров Компонент для социальных сетей с темной триадической цветовой гаммой и умеренной сложностью. Он использует Tailwind CSS для адаптивного дизайна с поддержкой темного режима, а также включает заполнители для изображений и аватаров.
Компонент Карточки Товаров
Отзывчивый компонент карточки товара с дизайном Glassmorphism, цветовой схемой в оттенках серого и поддержкой темной темы. Он включает в себя множество интерактивных элементов, подходящих для интерфейсов социальных сетей, таких как изображение продукта, название, описание, цена и кнопка добавления в корзину. В дизайне используются полупрозрачные элементы, похожие на стекло Froster, с эффектами размытия. Не используется Javascript, только HTML с CSS-классами Tailwind.