태그 클라우드 구성 요소 - 마켓플레이스 세피아/브라운 머티리얼 디자인
마켓플레이스 플랫폼용으로 설계된 복잡하고 반응이 빠른 태그 클라우드 구성 요소로, 세피아/갈색 톤의 머티리얼 디자인 원칙을 사용합니다. 대화형 태그, 범주 필터링 및 다크 모드 지원이 특징입니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-stone-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-extrabold text-amber-900 dark:text-amber-100 mb-6 sm:mb-8 text-center">
Explore Marketplace Categories
</h2>
<p class="text-center text-lg text-amber-800 dark:text-stone-300 mb-8 sm:mb-12 max-w-2xl mx-auto">
Discover products and services by browsing our extensive collection of tags and categories. Find exactly what you're looking for with ease.
</p>
<!-- Search and Filter Section -->
<div class="bg-white dark:bg-stone-800 shadow-lg dark:shadow-xl rounded-xl p-4 sm:p-6 mb-8 sm:mb-12 transition-all duration-300 ease-in-out">
<div class="flex flex-col md:flex-row items-center gap-4">
<div class="relative flex-grow w-full md:w-auto">
<input type="text" placeholder="Search for tags..." class="w-full pl-10 pr-4 py-2 rounded-lg border-2 border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-900 text-amber-900 dark:text-stone-200 placeholder-stone-400 dark:placeholder-stone-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all duration-300 ease-in-out">
<svg class="w-5 h-5 text-stone-400 dark:text-stone-500 absolute left-3 top-1/2 -translate-y-1/2" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<select class="w-full md:w-auto px-4 py-2 rounded-lg border-2 border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-900 text-amber-900 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all duration-300 ease-in-out">
<option>All Categories</option>
<option>Popular</option>
<option>New Arrivals</option>
<option>Services</option>
<option>Products</option>
</select>
<button class="w-full md:w-auto px-6 py-2 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-semibold rounded-lg shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800 transition-all duration-300 ease-in-out">
Apply Filter
</button>
</div>
</div>
<!-- Tag Cloud Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
<!-- Tag Cloud Card 1 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=1" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Electronics</h3>
<p class="text-sm opacity-90">Gadgets & Devices</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Smartphones</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Computers</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Accessories</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 2 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=2" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Home Decor</h3>
<p class="text-sm opacity-90">Furniture & Furnishings</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Furniture</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Lighting</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Art</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 3 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=3" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Fashion & Apparel</h3>
<p class="text-sm opacity-90">Clothing & Accessories</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Womenswear</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Menswear</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Shoes</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 4 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=4" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Books & Media</h3>
<p class="text-sm opacity-90">Books, Movies, Music</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Fiction</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#NonFiction</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Movies</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 5 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=5" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Automotive</h3>
<p class="text-sm opacity-90">Vehicles & Parts</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Cars</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Motorcycles</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Parts</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 6 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=6" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Sports & Outdoors</h3>
<p class="text-sm opacity-90">Gear & Activities</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Fitness</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Camping</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Cycling</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 7 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=7" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Health & Beauty</h3>
<p class="text-sm opacity-90">Wellness & Cosmetics</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Skincare</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Haircare</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Supplements</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 8 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=8" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Food & Beverages</h3>
<p class="text-sm opacity-90">Groceries & Delicacies</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Organic</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Snacks</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Drinks</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
</div>
<!-- Pagination Placeholder (for demonstrating complexity) -->
<div class="flex justify-center mt-12 mb-4">
<nav class="inline-flex rounded-md p-2 bg-white dark:bg-stone-800 shadow-lg dark:shadow-xl transition-all duration-300 ease-in-out" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium rounded-l-md text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-amber-500 bg-amber-50 dark:bg-amber-900 text-sm font-medium text-amber-700 dark:text-amber-100 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
2
</a>
<a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-400 bg-stone-50 dark:bg-stone-900 cursor-default">
...
</span>
<a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
9
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
10
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium rounded-r-md text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>관련 구성 요소
태그 클라우드 구성 요소
비즈니스 및 기업 웹사이트를 위해 Bauhaus 원칙에 따라 설계된 단순하고 반응이 빠르며 생생한 태그 클라우드 구성 요소로, 기하학적 형태와 채도가 높은 기본 색상을 특징으로 하며 다크 모드를 지원합니다.
Retro Tag Cloud 구성 요소
Tailwind CSS를 사용하는 반응형 태그 클라우드 구성 요소로, 레트로/빈티지 디자인 미학, 파스텔 색 구성표 및 단순한 복잡성을 갖추고 있습니다. 다크 모드 지원을 포함한 포트폴리오에 적합합니다.