Компонент Карточки Товаров
Адаптивный компонент карточек товаров, разработанный с 3D-элементами и яркой цветовой схемой, включающий темную тему для блога и потребления контента. Он отличается средней сложностью и интерактивными элементами для вовлечения пользователя.
HTML-код
<div class="flex flex-wrap justify-center space-x-4 space-y-4 p-6 bg-white dark:bg-gray-900">
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-red-400 to-orange-400 dark:from-red-600 dark:to-orange-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-white dark:text-gray-200">Product Title</h2>
<p class="text-gray-800 dark:text-gray-400">This is a brief description of the product that engages the reader's attention.</p>
<div class="flex items-center space-x-2 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-blue-400 to-purple-400 dark:from-blue-600 dark:to-purple-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-white dark:text-gray-200">Another Product Title</h2>
<p class="text-gray-800 dark:text-gray-400">This product offers great features and has received positive feedback from users.</p>
<div class="flex items-center space-x-2 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-green-400 to-teal-400 dark:from-green-600 dark:to-teal-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-white dark:text-gray-200">Exciting New Product</h2>
<p class="text-gray-800 dark:text-gray-400">Discover the amazing capabilities of this product that make your life easier.</p>
<div class="flex items-center space-x-2 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>
</div>
</div>Связанные компоненты
Карточки товаров для конфет в стиле ар-деко
Отзывчивая составляющая карточки товаров с дизайном в стиле ар-деко и веселой конфетной цветовой гаммой, подходящая для систем бронирования и бронирования. Включает поддержку темного режима.
Компонент Карточки Товаров
Отзывчивый компонент карточки товара с ретро/винтажным дизайном, аналогичной цветовой гаммой и поддержкой темной темы, подходящий для приборной панели. Дизайн включает в себя заполнители для изображений и сведений о продукте.
Компонент Нейморфные карточки товаров - Ретро палитра
Сложный, отзывчивый компонент карточек товаров, разработанный в мягком стиле Neumorphic UI с использованием приглушенной цветовой палитры ретро/винтаж. Функции включают поддержку темного режима, тонкие тени для эффекта выдавливания и семантический HTML для специальных возможностей. Подходит для чтения и потребления контента, например, для блога или отображения контента.