Компонент "Карточки товаров" с интерфейсом темного режима
Компонент карточек товаров с пользовательским интерфейсом темного режима и отзывчивыми эффектами с использованием Tailwind CSS.
HTML-код
<div class="bg-gray-900 text-white py-8">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-8">Our Products</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Product Name 1</h3>
<p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold">$19.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Product Name 2</h3>
<p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold">$29.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Product Name 3</h3>
<p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold">$39.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент Карточки Товаров
Сложный, адаптивный компонент карточки товаров с корпоративным/профессиональным дизайном с использованием фиолетово-фиолетовой цветовой схемы, подходящий для объявлений о новостях или профессиональных сервисных товарах. Включает поддержку темного режима.
Компонент Карточки Товаров
Адаптивный компонент карточек товаров, разработанный в стиле скевоморфизма, цветовой гамме земляных тонов и поддержке темных тем. Идеально подходит для информационных панелей.
Компонент Нейморфные карточки товаров - Ретро палитра
Сложный, отзывчивый компонент карточек товаров, разработанный в мягком стиле Neumorphic UI с использованием приглушенной цветовой палитры ретро/винтаж. Функции включают поддержку темного режима, тонкие тени для эффекта выдавливания и семантический HTML для специальных возможностей. Подходит для чтения и потребления контента, например, для блога или отображения контента.