Компонент Карточки Товаров - Сельское хозяйство/Фермерство
Адаптивный компонент карточки товара, разработанный для сельского хозяйства и фермерских сайтов, с чистой типографикой, системами сеток и осенними цветами. Включает поддержку темного режима.
HTML-код
<section class="py-12 bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 font-sans">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-bold text-center mb-10 tracking-tight dark:text-orange-500">
Our Farm Produce
</h2>
<p class="max-w-3xl mx-auto text-center text-lg mb-12 opacity-90 leading-relaxed">
Discover our selection of fresh, high-quality agricultural products, sustainably grown and harvested with care. From field to your table.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
<div class="relative pb-2/3 overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1015/400/300" alt="Fresh Organic Apples">
<span class="absolute top-3 right-3 bg-orange-600 text-white text-xs font-semibold px-3 py-1 rounded-full shadow-md">NEW</span>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2 line-clamp-2">Organic Gala Apples</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Sweet and crisp, perfect for snacking or baking. Grown without pesticides.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$4.99 <span class="text-base text-stone-500">/lb</span></span>
<div class="flex items-center text-orange-500">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
</div>
</div>
<button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
Add to Cart
</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
<div class="relative pb-2/3 overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1004/400/300" alt="Freshly Harvested Carrots">
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2 line-clamp-2">Farm Fresh Carrots</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Sweet, crunchy, and packed with vitamins. Directly from our fields to your kitchen.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$2.49 <span class="text-base text-stone-500">/bunch</span></span>
<div class="flex items-center text-orange-500">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
</div>
</div>
<button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
Add to Cart
</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
<div class="relative pb-2/3 overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/400/300" alt="Artisan Sourdough Bread">
<span class="absolute top-3 left-3 bg-burgundy-700 text-white text-xs font-semibold px-3 py-1 rounded-full shadow-md dark:bg-burgundy-600">LIMITED</span>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2 line-clamp-2">Artisan Sourdough Bread</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Hand-baked with our own ancient grain flour. A true taste of tradition.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$6.00 <span class="text-base text-stone-500">/loaf</span></span>
<div class="flex items-center text-orange-500">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
</div>
</div>
<button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
Add to Cart
</button>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
<div class="relative pb-2/3 overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/400/300" alt="Farm Fresh Eggs">
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2 line-clamp-2">Pasture-Raised Eggs</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">From happy, healthy chickens roaming freely. Rich yolks and superior taste.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$5.19 <span class="text-base text-stone-500">/dozen</span></span>
<div class="flex items-center text-orange-500">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current text-orange-300 dark:text-orange-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
</div>
</div>
<button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</section>Связанные компоненты
Компонент Карточки Товаров
Карточки товаров Компонент для социальных сетей с темной триадической цветовой гаммой и умеренной сложностью. Он использует Tailwind CSS для адаптивного дизайна с поддержкой темного режима, а также включает заполнители для изображений и аватаров.
ArtDeco_ProductCards_Music
Простой отзывчивый компонент карточки товаров с эстетикой ар-деко, с геометрическими узорами и закатной/теплой цветовой гаммой, подходящий для музыкальных и аудиоплатформ. Включает поддержку темного режима.
Компонент Карточки Товаров
Адаптивный компонент карточки товара, выполненный в стиле Material Design, с цветовой гаммой в оттенках серого. Он включает в себя изображение, заголовок, описание и кнопку с поддержкой темного режима с использованием Tailwind CSS.