Composant du tableau de bord de l’agriculture de luxe
Un composant de tableau de bord élégant et sophistiqué pour l’agriculture et les sites Web agricoles, avec une palette de couleurs noir et blanc avec un accent émeraude vibrant. Il comprend des indicateurs clés, des activités récentes et des éléments interactifs, conçus pour être entièrement réactifs et prendre en charge le mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Header/Title Section -->
<div class="md:col-span-3 bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl transition-all duration-300">
<h1 class="text-3xl font-serif text-gray-900 mb-2 dark:text-gray-100">Farm Overview Dashboard</h1>
<p class="text-gray-600 dark:text-gray-400">Monitor key agricultural metrics and activities.</p>
<div class="mt-4 flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Farm Manager Avatar" class="w-10 h-10 rounded-full border-2 border-emerald-500">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Farm Manager</p>
</div>
</div>
</div>
<!-- Key Metrics Section -->
<div class="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Metric Card 1 -->
<div class="bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Acres Cultivated</h3>
<p class="text-4xl font-bold text-emerald-600">475 <span class="text-lg text-gray-500 dark:text-gray-400">acres</span></p>
</div>
<p class="text-sm text-gray-500 mt-4 dark:text-gray-400">+5% from last month</p>
</div>
<!-- Metric Card 2 -->
<div class="bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Crop Yield (Avg)</h3>
<p class="text-4xl font-bold text-emerald-600">2.4 <span class="text-lg text-gray-500 dark:text-gray-400">tons/acre</span></p>
</div>
<p class="text-sm text-gray-500 mt-4 dark:text-gray-400">+0.2 last harvest period</p>
</div>
<!-- Metric Card 3 -->
<div class="bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Livestock Health</h3>
<p class="text-4xl font-bold text-emerald-600">98% <span class="text-lg text-gray-500 dark:text-gray-400">healthy</span></p>
</div>
<p class="text-sm text-gray-500 mt-4 dark:text-gray-400">Excellent status</p>
</div>
<!-- Metric Card 4 -->
<div class="bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Water Usage</h3>
<p class="text-4xl font-bold text-emerald-600">120K <span class="text-lg text-gray-500 dark:text-gray-400">liters</span></p>
</div>
<p class="text-sm text-gray-500 mt-4 dark:text-gray-400">Target: 100K liters</p>
</div>
<!-- Metric Card 5 (Example of a larger card) -->
<div class="sm:col-span-2 lg:col-span-1 bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Next Planting Cycle</h3>
<p class="text-4xl font-bold text-emerald-600">14 <span class="text-lg text-gray-500 dark:text-gray-400">days</span></p>
</div>
<p class="text-sm text-gray-500 mt-4 dark:text-gray-400">Expected: Wheat & Barley</p>
</div>
</div>
<!-- Recent Activities / Quick Links Section -->
<div class="md:col-span-1 bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl transition-all duration-300">
<h3 class="text-xl font-semibold text-gray-900 mb-4 dark:text-gray-100">Recent Activities</h3>
<ul class="space-y-4">
<li class="flex items-start">
<div class="w-2 h-2 rounded-full bg-emerald-500 mt-2 mr-3 flex-shrink-0"></div>
<div>
<p class="text-gray-800 dark:text-gray-200">Fertilization completed in Field 3.</p>
<p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</li>
<li class="flex items-start">
<div class="w-2 h-2 rounded-full bg-emerald-500 mt-2 mr-3 flex-shrink-0"></div>
<div>
<p class="text-gray-800 dark:text-gray-200">New irrigation system configured.</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Yesterday</p>
</div>
</li>
<li class="flex items-start">
<div class="w-2 h-2 rounded-full bg-emerald-500 mt-2 mr-3 flex-shrink-0"></div>
<div>
<p class="text-gray-800 dark:text-gray-200">Harvest of Corn Plot A completed.</p>
<p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
</div>
</li>
</ul>
<h3 class="text-xl font-semibold text-gray-900 mt-8 mb-4 dark:text-gray-100">Quick Links</h3>
<div class="grid grid-cols-2 gap-3">
<a href="#" class="bg-emerald-500 text-white py-2 px-4 rounded-md text-center text-sm hover:bg-emerald-600 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 active:bg-emerald-700">Field Map</a>
<a href="#" class="bg-emerald-500 text-white py-2 px-4 rounded-md text-center text-sm hover:bg-emerald-600 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 active:bg-emerald-700">Reports</a>
<a href="#" class="bg-emerald-500 text-white py-2 px-4 rounded-md text-center text-sm hover:bg-emerald-600 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 active:bg-emerald-700">Weather</a>
<a href="#" class="bg-emerald-500 text-white py-2 px-4 rounded-md text-center text-sm hover:bg-emerald-600 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 active:bg-emerald-700">Inventory</a>
</div>
</div>
<!-- Farm Equipment Overview -->
<div class="md:col-span-3 bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl transition-all duration-300">
<h3 class="text-xl font-semibold text-gray-900 mb-4 dark:text-gray-100">Farm Equipment Status</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<!-- Equipment Card 1 -->
<div class="border border-gray-200 p-4 rounded-md dark:border-gray-700">
<img src="https://picsum.photos/300/200?random=1" alt="Tractor" class="w-full h-32 object-cover rounded-md mb-3">
<p class="font-medium text-gray-900 dark:text-gray-100">Tractor Alpha</p>
<p class="text-sm text-emerald-600">Online</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Last service: 2 weeks ago</p>
</div>
<!-- Equipment Card 2 -->
<div class="border border-gray-200 p-4 rounded-md dark:border-gray-700">
<img src="https://picsum.photos/300/200?random=2" alt="Harvester" class="w-full h-32 object-cover rounded-md mb-3">
<p class="font-medium text-gray-900 dark:text-gray-100">Harvester Beta</p>
<p class="text-sm text-yellow-600">Idle</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Fuel: 75%</p>
</div>
<!-- Equipment Card 3 -->
<div class="border border-gray-200 p-4 rounded-md dark:border-gray-700 dark:text-gray-400">
<img src="https://picsum.photos/300/200?random=3" alt="Irrigation Pump" class="w-full h-32 object-cover rounded-md mb-3">
<p class="font-medium text-gray-900 dark:text-gray-100">Irrigation Pump</p>
<p class="text-sm text-red-600">Offline</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Maintenance required</p>
</div>
<!-- Equipment Card 4 -->
<div class="border border-gray-200 p-4 rounded-md dark:border-gray-700">
<img src="https://picsum.photos/300/200?random=4" alt="Drone" class="w-full h-32 object-cover rounded-md mb-3">
<p class="font-medium text-gray-900 dark:text-gray-100">Farm Drone 1</p>
<p class="text-sm text-emerald-600">Online</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Battery: 90%</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de tableau de bord Luxury/Premium Marketplace
Un composant de tableau de bord complexe et réactif pour une place de marché multifournisseur avec un style de design luxueux/haut de gamme. Dispose d’une palette de couleurs bleue d’entreprise professionnelle, d’une typographie sophistiquée et d’une prise en charge du mode sombre. Comprend des sections pour une vue d’ensemble, les ventes récentes, les meilleurs produits et des statistiques rapides.
Composant de tableau de bord brutaliste en niveaux de gris
Une disposition de tableau de bord simple, de style brutaliste, en niveaux de gris pour les sites Web d’entreprise, réactive avec prise en charge du mode sombre, construite avec Tailwind CSS.
Composant Tableaux de bord
Un composant de tableau de bord réactif conçu avec des éléments 3D et des tons Terre, présentant la visualisation des données et les panneaux de contrôle avec prise en charge du thème sombre.