태그 클라우드 구성 요소
농업/농업 웹사이트를 위해 설계된 가을 색의 복잡한 산업 테마 태그 클라우드 구성 요소입니다. 다양한 대화형 요소, 완전한 응답성 및 다크 모드 지원이 특징입니다.
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>관련 구성 요소
태그 클라우드 구성 요소
뉴모피즘(Neumorphism) 스타일로 디자인된 태그 클라우드 컴포넌트로, 전자상거래용 단색 구성표를 활용하고 반응형 디자인으로 어두운 테마를 지원합니다.
Bauhaus 태그 클라우드 구성 요소
Bauhaus에서 영감을 받은 디자인의 복잡하고 반응이 빠른 태그 클라우드 구성 요소로, 쿨 뉴트럴을 사용하여 다크 모드를 지원하는 교육용 플랫폼에 적합합니다.
태그 클라우드 구성 요소
Material Design 원칙에 따라 설계된 반응형 태그 클라우드 구성 요소로, 대시보드에 적합한 고대비 색 구성표를 특징으로 합니다. 다크 모드 지원 및 접근성을 위한 시맨틱 HTML이 포함되어 있습니다. 상호 작용을 위해 호버 효과가 포함됩니다.