タグクラウドコンポーネント
農業/農業のWebサイト向けに設計された、秋の色をテーマにした複雑な産業をテーマにしたタグクラウドコンポーネント。複数のインタラクティブ要素、完全な応答性、およびダークモードのサポートを備えています。
HTMLコード
<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>関連コンポーネント
タグクラウドコンポーネント
マテリアルデザインスタイル、補色スキーム、eコマース目的向けの適度な複雑さを備えたレスポンシブタグクラウドコンポーネントで、ダークテーマのサポートを特徴としています。
Neumorphism Tag Cloud コンポーネント
ニューモーフィズムデザイン、パステルカラースキーム、複雑なインタラクションを備えたレスポンシブタグクラウドコンポーネントで、Eコマース向けに調整されています。ダークモードのサポートが含まれており、Tailwind CSSを使用します。