Gradient Agriculture Barre latérale
Un composant de barre latérale simple et réactif avec un design en dégradé monochromatique, adapté à l’agriculture et aux sites Web agricoles. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
<aside class="flex flex-col w-64 bg-gradient-to-br from-green-500 to-emerald-700 text-white shadow-lg dark:from-green-700 dark:to-emerald-900 transition-all duration-300 ease-in-out">
<div class="flex items-center justify-center h-20 border-b border-green-600 dark:border-green-800">
<h1 class="text-3xl font-bold tracking-wide transition-colors duration-300 dark:text-gray-100">AgriHub</h1>
</div>
<nav class="flex-1 py-6 space-y-2 overflow-y-auto custom-scrollbar">
<a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
<svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
Dashboard
</a>
<a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
<svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
Crop Management
</a>
<a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
<svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
Livestock
</a>
<a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
<svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
Resources
</a>
<a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
<svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
Settings
</a>
</nav>
<div class="p-6 border-t border-green-600 dark:border-green-800">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-green-200 dark:border-green-400 object-cover" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-green-50 dark:text-gray-100">John Doe</p>
<p class="text-sm text-green-100 dark:text-gray-300">Admin</p>
</div>
</div>
</div>
</aside>
<main class="flex-1 p-6 lg:p-10 overflow-y-auto custom-scrollbar">
<h2 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 transition-colors duration-300">Welcome to AgriHub!</h2>
<p class="text-gray-700 dark:text-gray-300 text-lg mb-8 transition-colors duration-300">Manage your farm operations efficiently and effectively.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Total Crops</h3>
<p class="text-4xl font-bold text-green-600 dark:text-green-400">120 Acres</p>
<img src="https://picsum.photos/id/101/400/250" alt="Field View" class="mt-4 rounded-lg object-cover w-full h-40">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Livestock Count</h3>
<p class="text-4xl font-bold text-green-600 dark:text-green-400">345 Heads</p>
<img src="https://picsum.photos/id/200/400/250" alt="Livestock" class="mt-4 rounded-lg object-cover w-full h-40">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Recent Activity</h3>
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
<li>Harvested Wheat (5 days ago)</li>
<li>Fertilized Corn Field (2 days ago)</li>
<li>Cattle vaccinated (yesterday)</li>
</ul>
<img src="https://picsum.photos/id/300/400/250" alt="Farm Activity" class="mt-4 rounded-lg object-cover w-full h-40">
</div>
</div>
</main>
</div>
<style>
/* Custom scrollbar for better appearance */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.5);
}
/* Dark mode scrollbar */
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.6);
}
/* For responsiveness, adjust sidebar width on smaller screens */
@media (max-width: 768px) {
aside {
width: 100%;
height: auto;
position: relative; /* Allow sidebar to stack */
flex-direction: row; /* Stack items horizontally on mobile */
flex-wrap: wrap; /* Allow wrapping */
justify-content: space-around; /* Distribute items */
padding-top: 0;
padding-bottom: 0;
}
aside div:first-child {
display: none; /* Hide logo/title on very small screens if desired */
}
aside nav {
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding-top: 1rem;
padding-bottom: 1rem;
width: 100%;
}
aside nav a {
min-width: 120px;
justify-content: center;
padding: 0.75rem 1rem;
font-size: 0.9rem;
flex-shrink: 0;
}
aside nav a svg {
margin-right: 0.5rem;
}
aside div:last-child {
display: none; /* Hide user info on very small screens */
}
main {
padding: 1rem;
}
}
</style>Composants associés
3D_Earth_Tones_Non_Profit_Sidebar
Un composant de barre latérale complexe et réactif avec des éléments de conception 3D et une palette de couleurs de terre, adapté aux sites Web à but non lucratif et caritatifs. Inclut la prise en charge du mode sombre et du HTML sémantique.
Composant de la barre latérale
Un composant de barre latérale minimaliste avec un design réactif et une prise en charge du thème sombre, utilisant Tailwind CSS.
Composant de la barre latérale
Un composant de barre latérale réactif conçu pour les applications de commerce électronique avec des éléments de conception matérielle et une palette de couleurs pastel, avec prise en charge du mode sombre.