Компонент Карточки Товаров
Отзывчивый компонент карточки товара с дизайном Glassmorphism, цветовой схемой в оттенках серого и поддержкой темной темы. Он включает в себя множество интерактивных элементов, подходящих для интерфейсов социальных сетей, таких как изображение продукта, название, описание, цена и кнопка добавления в корзину. В дизайне используются полупрозрачные элементы, похожие на стекло Froster, с эффектами размытия. Не используется Javascript, только HTML с CSS-классами Tailwind.
HTML-код
<div class="flex flex-wrap items-center justify-center min-h-screen p-10 bg-gray-100 dark:bg-gray-900">
<!-- Product Card 1 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=1"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 1</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
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 mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$120.00
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/men/1.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">John Doe</p>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=2"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 2</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
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 mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$99.50
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/women/2.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">Jane Smith</p>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=3"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 3</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
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 mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$249.99
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/men/3.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">Peter Jones</p>
</div>
</div>
</div>
</div>
Связанные компоненты
Компонент Карточки Товаров
Адаптивный компонент карточек товаров, разработанный по принципам Material Design с использованием Tailwind CSS. Он поддерживает темный режим и включает в себя тени и макеты на основе сетки.
Компонент Карточки Товаров
Скевоморфный компонент карточек товаров для панели управления с адаптивным дизайном и поддержкой темных тем.
Компонент Карточки Товаров
Компонент карточки товара в стиле брутализм с высокой контрастностью, отзывчивыми эффектами и поддержкой темного режима.