高級農業ダッシュボードコンポーネント
農業および農業Webサイト向けのエレガントで洗練されたダッシュボードコンポーネントで、鮮やかなエメラルドのアクセントが付いた黒と白の配色が特徴です。これには、主要な指標、最近のアクティビティ、インタラクティブな要素が含まれており、完全にレスポンシブでダークモードをサポートするように設計されています。
HTMLコード
<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>関連コンポーネント
ダッシュボードコンポーネント
Tailwind CSSを使用して構築された、レスポンシブエフェクトとダークテーマのサポートを備えたフラットデザインを紹介するミニマリストのダッシュボードコンポーネント。
ダッシュボードコンポーネント
ビジネス/企業での使用に適した単色の配色を備えたダークモード用に設計された複雑なダッシュボードコンポーネント。豊富なインタラクティブ要素を備えており、応答性に優れています。
Dashboard_Component
水彩画/芸術的なデザインスタイルと温かみのある夕日の配色を備えたレスポンシブな金融/銀行ダッシュボードコンポーネント。ダークモードのサポートと中程度の複雑さのレベルが含まれています。