Composant de nuage de balises
Un composant complexe de nuage de balises à thème industriel avec des couleurs d’automne, conçu pour les sites Web agricoles. Dispose de plusieurs éléments interactifs, d’une réactivité totale et d’une prise en charge du mode sombre.
HTML Code
<div class="font-sans bg-amber-50 dark:bg-zinc-900 transition-colors duration-300 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
<div class="w-full max-w-4xl bg-gradient-to-br from-orange-800 to-red-900 dark:from-zinc-800 dark:to-stone-900 rounded-lg shadow-xl overflow-hidden animate-fade-in border-4 border-orange-900 dark:border-zinc-700 relative">
<!-- Background Texture Overlay -->
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/crissxcross.png')] opacity-10 dark:opacity-5"></div>
<div class="relative p-4 sm:p-6 md:p-8 space-y-6">
<!-- Header Section -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b-2 border-orange-700 dark:border-zinc-600 pb-4">
<h2 class="text-3xl sm:text-4xl font-bold text-amber-50 dark:text-amber-100 mb-2 sm:mb-0">
<i class="fas fa-tags mr-3 text-orange-300 dark:text-zinc-400"></i>Agricultural Insights
</h2>
<div class="flex items-center space-x-3">
<span class="text-orange-200 dark:text-zinc-400 text-sm italic hidden sm:block">Last Updated: <span class="font-semibold">Oct 26, 2023</span></span>
<button class="p-2 rounded-full bg-orange-700 hover:bg-orange-600 text-amber-50 dark:bg-zinc-700 dark:hover:bg-zinc-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-500">
<i class="fas fa-sync-alt"></i>
</button>
</div>
</div>
<!-- Search and Filter Bar -->
<div class="flex flex-col md:flex-row gap-4">
<div class="relative flex-grow">
<input type="text" placeholder="Search for a topic..." class="w-full pl-10 pr-4 py-2 rounded-md bg-orange-900 dark:bg-zinc-700 text-amber-100 placeholder-orange-300 dark:text-amber-100 dark:placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 border-2 border-orange-800 dark:border-zinc-600 shadow-inner-dark">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-search text-orange-300 dark:text-zinc-400"></i>
</div>
</div>
<select class="w-full md:w-auto px-4 py-2 rounded-md bg-orange-900 dark:bg-zinc-700 text-amber-100 border-2 border-orange-800 dark:border-zinc-600 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-inner-dark">
<option value="all">All Categories</option>
<option value="crops">Crops</option>
<option value="livestock">Livestock</option>
<option value="machinery">Machinery</option>
<option value="soil">Soil Health</option>
<option value="sustainability">Sustainability</option>
</select>
</div>
<!-- Tags Container -->
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4 lg:gap-5 auto-rows-min mt-4 p-4 bg-orange-900/50 dark:bg-zinc-800/50 rounded-lg border-2 border-orange-800 dark:border-zinc-700 overflow-hidden shadow-inset-dark">
<!-- Tag Item -->
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-seedling text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Crop Rotation</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">32 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-cow text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Livestock Care</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">28 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-tractor text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Farm Machinery</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">45 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-leaf text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Organic Farming</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">18 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-droplet text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Irrigation Systems</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">12 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-tree text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Agroforestry</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">9 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-bug text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Pest Management</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">21 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-dollar-sign text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Agricultural Economics</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">15 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-cloud-sun text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Climate Adaptations</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">10 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-tractor text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Precision Farming</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">25 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-truck-pickup text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Supply Chain</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">14 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-flask text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Soil Analysis</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">19 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-solar-panel text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Renewable Energy</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">7 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-graduation-cap text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Extension Services</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">11 topics</span>
</a>
<a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
<i class="fa-solid fa-chart-line text-orange-300 dark:text-zinc-400 mb-1"></i>
<p class="text-sm font-medium">Market Trends</p>
<span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">16 topics</span>
</a>
</div>
<!-- Footer Call to Action -->
<div class="flex flex-col sm:flex-row justify-between items-center bg-orange-900/70 dark:bg-zinc-800/70 p-4 rounded-lg border-2 border-orange-800 dark:border-zinc-700 shadow-lg mt-6">
<p class="text-amber-100 dark:text-amber-200 text-center sm:text-left mb-3 sm:mb-0">
Can't find what you're looking for? <span class="font-semibold">Suggest a new topic!</span>
</p>
<button class="px-6 py-2 bg-orange-500 hover:bg-orange-400 text-orange-900 font-bold rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-50 dark:focus:ring-orange-300 dark:bg-amber-500 dark:hover:bg-amber-400">
Add New Tag <i class="fa-solid fa-plus-circle ml-2"></i>
</button>
</div>
</div>
</div>
<!-- Include Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>
<!-- Custom Styles for shadows using pseudo-elements or multiple box-shadows -->
<style>
.shadow-inner-dark {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 -2px 2px rgba(255, 255, 255, 0.05);
}
.dark .shadow-inner-dark {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -2px 2px rgba(255, 255, 255, 0.02);
}
.shadow-inset-dark {
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -4px 4px rgba(255, 255, 255, 0.03);
}
.dark .shadow-inset-dark {
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 -4px 4px rgba(255, 255, 255, 0.01);
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fade-in 0.8s ease-out forwards;
}
</style>Composants associés
Composant de nuage de balises rétro
Un composant de nuage de balises réactif utilisant Tailwind CSS, avec une esthétique de design rétro/vintage, une palette de couleurs pastel et une complexité simple. Convient à un portefeuille, y compris la prise en charge du mode sombre.
Composant Luxury Tag Cloud
Un composant de nuage de balises élégant et réactif conçu pour les services de conseil professionnels, avec une esthétique luxueuse/premium avec des tons de coucher de soleil/de couleurs chaudes et la prise en charge du mode sombre.
Composant de nuage de balises
Un composant Tag Cloud réactif conçu pour les interfaces de médias sociaux avec une interface utilisateur en mode sombre et une palette de couleurs pastel.