Componentes Nube de etiquetas Componente de nube de etiquetas - Marketplace Sepia/Brown Material Design
Componente de nube de etiquetas - Marketplace Sepia/Brown Material Design

Un componente de nube de etiquetas complejo y receptivo diseñado para plataformas de mercado, que utiliza principios de Material Design con tonos sepia/marrón. Cuenta con etiquetas interactivas, filtrado de categorías y compatibilidad con el modo oscuro.
Vista previa

Código 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">&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>
Componentes relacionados

Componente de nube de etiquetas

Un componente de nube de etiquetas diseñado con un estilo skeuomórfico, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Abrir
Componente de nube de etiquetas

Un componente de nube de etiquetas monoespaciado inspirado en código para sitios web de juegos con colores de alto contraste y compatibilidad con modo oscuro. Presenta una estética similar a la de un terminal con etiquetas interactivas.
Abrir
Componente de nube de etiquetas de la Bauhaus

Un componente de nube de etiquetas complejo y receptivo con un diseño inspirado en la Bauhaus, que utiliza neutros fríos, adecuado para plataformas educativas con soporte para modo oscuro.
Abrir