CCHub Logo CCHub Tailwind Collection
Komponenten Tag Cloud Tag-Cloud-Komponente

Tag-Cloud-Komponente

Eine einfache, reaktionsschnelle und lebendige Tag-Cloud-Komponente, die nach Bauhaus-Prinzipien für Geschäfts- und Unternehmenswebsites entwickelt wurde, mit geometrischen Formen und Primärfarben mit hoher Sättigung und Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="max-w-4xl mx-auto py-8 px-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl border-t-8 border-b-8 border-blue-500 dark:border-blue-700 overflow-hidden relative">
    <div class="absolute -top-6 -right-6 w-24 h-24 bg-red-500 dark:bg-red-700 transform rotate-45 opacity-75"></div>
    <div class="absolute -bottom-6 -left-6 w-24 h-24 bg-yellow-500 dark:bg-yellow-700 transform -rotate-45 opacity-75"></div>

    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 sm:mb-8 text-center uppercase tracking-wide relative z-10">
      <span class="block">Explore Our Expertise</span>
      <span class="block w-16 h-1.5 bg-blue-500 dark:bg-blue-700 mx-auto mt-2"></span>
    </h2>

    <div class="flex flex-wrap justify-center gap-2 sm:gap-3 lg:gap-4 relative z-10">
      <a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-blue-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg 
                  hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300 ease-in-out
                  transform hover:-translate-y-0.5 hover:scale-105">
        Strategy
      </a>
      <a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-red-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg 
                  hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-300 ease-in-out
                  transform hover:-translate-y-0.5 hover:scale-105">
        Innovation
      </a>
      <a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-yellow-500 text-gray-900 text-sm sm:text-base font-semibold rounded-md shadow-lg 
                  hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-600 transition duration-300 ease-in-out
                  transform hover:-translate-y-0.5 hover:scale-105">
        Technology
      </a>
      <a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-green-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg 
                  hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 transition duration-300 ease-in-out
                  transform hover:-translate-y-0.5 hover:scale-105">
        Consulting
      </a>
      <a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-purple-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg 
                  hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 transition duration-300 ease-in-out
                  transform hover:-translate-y-0.5 hover:scale-105">
        Digitalization
      </a>
      <a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-teal-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg 
                  hover:bg-teal-600 dark:bg-teal-700 dark:hover:bg-teal-600 transition duration-300 ease-in-out
                  transform hover:-translate-y-0.5 hover:scale-105">
        Analytics
      </a>
      <a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-orange-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg 
                  hover:bg-orange-600 dark:bg-orange-700 dark:hover:bg-orange-600 transition duration-300 ease-in-out
                  transform hover:-translate-y-0.5 hover:scale-105">
        Marketing
      </a>
      <a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-pink-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg 
                  hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 ease-in-out
                  transform hover:-translate-y-0.5 hover:scale-105">
        Branding
      </a>
      <a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-indigo-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg 
                  hover:bg-indigo-600 dark:bg-indigo-700 dark:hover:bg-indigo-600 transition duration-300 ease-in-out
                  transform hover:-translate-y-0.5 hover:scale-105">
        Research
      </a>
      <a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-lime-500 text-gray-900 text-sm sm:text-base font-semibold rounded-md shadow-lg 
                  hover:bg-lime-600 dark:bg-lime-700 dark:hover:bg-lime-600 transition duration-300 ease-in-out
                  transform hover:-translate-y-0.5 hover:scale-105">
        Development
      </a>
    </div>
  </div>
</div>

Verwandte Komponenten

Tag-Cloud-Komponente

Eine Tag-Cloud-Komponente, die im Neumorphism-Stil entworfen wurde, ein monochromatisches Farbschema für E-Commerce-Zwecke verwendet und dunkles Design mit responsivem Design unterstützt.

Offen

Tag-Cloud-Komponente

Eine Tag-Cloud-Komponente, die im Neumorphism-Stil in Graustufen entwickelt wurde, sich für Blogs und den Konsum von Inhalten eignet und interaktive Elemente enthält.

Offen

Tag-Cloud-Komponente

Eine reaktionsschnelle Tag-Cloud-Komponente, die für die Benutzeroberfläche im Dunkelmodus entwickelt wurde und ein Portfolio mit einem analogen Farbschema präsentiert.

Offen