Industrial_Farming_Cards_Component
Un ensemble de cartes réactives avec une esthétique industrielle et de matières premières, des couleurs neutres chaudes et un support en mode sombre, adapté à l’agriculture et aux sites Web agricoles. Comprend des éléments apparents et un design utilitaire.
HTML Code
<section class="py-12 bg-stone-100 dark:bg-stone-900 transition-colors duration-300">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-extrabold text-center text-stone-800 dark:text-stone-200 mb-12 uppercase tracking-wide font-mono">
Farm Operations At A Glance
</h2>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Card 1: Crop Monitoring -->
<div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
<div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">1</div>
<img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/1015/400/300" alt="Farm field with crops">
<div class="p-6 flex-grow flex flex-col">
<h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Crop Monitoring</h3>
<p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
Real-time data on soil moisture, temperature, and nutrient levels. Optimize irrigation and fertilization for maximum yield.
</p>
<div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
<span class="flex items-center text-sm">
<svg class="w-4 h-4 mr-1 text-yellow-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
Updated daily
</span>
<a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
View Analytics
</a>
</div>
</div>
</div>
<!-- Card 2: Livestock Management -->
<div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
<div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">2</div>
<img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/1084/400/300" alt="Cows grazing in a field">
<div class="p-6 flex-grow flex flex-col">
<h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Livestock Health</h3>
<p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
Track animal health, feeding schedules, and breeding cycles. Ensure optimal welfare and productivity.
</p>
<div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
<span class="flex items-center text-sm">
<svg class="w-4 h-4 mr-1 text-green-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Healthy metrics
</span>
<a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
Manage Herds
</a>
</div>
</div>
</div>
<!-- Card 3: Equipment Maintenance -->
<div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
<div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">3</div>
<img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/106/400/300" alt="Heavy farm machinery">
<div class="p-6 flex-grow flex flex-col">
<h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Machinery Hub</h3>
<p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
Monitor equipment usage, schedule maintenance, and track fuel consumption. Minimize downtime and costs.
</p>
<div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
<span class="flex items-center text-sm">
<svg class="w-4 h-4 mr-1 text-red-600 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.32a1 1 0 01.743-.32h2a1 1 0 01.743.32l.995 1.194a.25.25 0 00.176.079h4.053A2.75 2.75 0 0118 7.32v7.74a2.75 2.75 0 01-2.75 2.75H4.75A2.75 2.75 0 012 15.06V7.32a2.75 2.75 0 012.75-2.75h4.053a.25.25 0 00.176-.079l.995-1.194zM12 9a1 1 0 10-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"></path></svg>
Service required
</span>
<a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
Schedule Service
</a>
</div>
</div>
</div>
<!-- Card 4: Farm Management -->
<div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
<div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">4</div>
<img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/194/400/300" alt="Barn and farm landscape">
<div class="p-6 flex-grow flex flex-col">
<h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Supply Chain</h3>
<p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
Manage inventory, orders, and sales. Streamline your farm's entire production and distribution process.
</p>
<div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
<span class="flex items-center text-sm">
<svg class="w-4 h-4 mr-1 text-blue-600 dark:text-sky-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1h2a1 1 0 110 2h-2v2a1 1 0 11-2 0V6H6a1 1 0 010-2h2V3a1 1 0 011-1z"/><path fill-rule="evenodd" d="M4 7h12a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V9a2 2 0 012-2zm0 2v6h12V9H4z" clip-rule="evenodd"></path></svg>
New orders
</span>
<a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
View Reports
</a>
</div>
</div>
</div>
</div>
</div>
</section>Composants associés
Composant Cartes Skeuomorphic
Inspiré par le skeuomorphisme, le composant de carte suivant est entièrement réactif avec la prise en charge du thème sombre. Pour le mode sombre, la prise en charge CSS est suffisante. Aucun JavaScript n’est nécessaire.
Composant Cartes
Un composant de cartes au design minimaliste et plat pour les systèmes de réservation, avec une palette de couleurs arc-en-ciel dégradée. Il est réactif, inclut la prise en charge du mode sombre et utilise des éléments simples pour un look épuré.
Composant Cartes
Un composant de carte de portefeuille réactif avec un style de conception brutaliste, utilisant une palette de couleurs pastel et une complexité modérée avec des fonctionnalités interactives. Cette carte présente des travaux ou des produits et prend en charge le mode sombre.