A complex, industrial-themed tag cloud component with autumn colors, designed for agriculture/farming websites. Features multiple interactive elements, full responsiveness, and dark mode support.
<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>
