CCHub Logo CCHub Tailwind Collection
Components Tag Cloud Tag Cloud Component - Marketplace Sepia/Brown Material Design

Tag Cloud Component - Marketplace Sepia/Brown Material Design

A complex, responsive tag cloud component designed for marketplace platforms, using Material Design principles with sepia/brown tones. Features interactive tags, category filtering, and dark mode support.

Preview

HTML Code 

<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">&rarr;</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">&rarr;</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">&rarr;</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">&rarr;</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">&rarr;</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">&rarr;</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">&rarr;</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">&rarr;</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>

Related Components

Tag Cloud Component 13

A Tag Cloud component designed with Neumorphism style. It features a soft UI style with elements appearing to extrude from the background using subtle shadows. The component supports responsive design and dark themes.

Open

Tag Cloud Component

A responsive Tag Cloud component designed for social media interfaces with a dark mode UI and pastel color scheme.

Open

Tag Cloud Component

A Tag Cloud Component designed with Neumorphism style, utilizing a monochromatic color scheme for e-commerce purposes and supporting dark theme with responsive design.

Open