CCHub Logo CCHub Tailwind Collection
Komponenten Tag Cloud Tag-Cloud-Komponente (Dunkler Modus, Pastell)

Tag-Cloud-Komponente (Dunkler Modus, Pastell)

Eine responsive Tag-Cloud-Komponente mit Unterstützung für den Dunkelmodus unter Verwendung von Pastellfarben. Geeignet für ein Portfolio.

Vorschau

HTML-Code 

<div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-center mb-8 dark:text-purple-200">Skills & Interests</h2>
    <div class="flex flex-wrap justify-center gap-4">
      <span class="bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-purple-300 dark:hover:bg-purple-600 transition duration-300">
        Web Development
      </span>
      <span class="bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-pink-300 dark:hover:bg-pink-600 transition duration-300">
        UI/UX Design
      </span>
      <span class="bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-blue-300 dark:hover:bg-blue-600 transition duration-300">
        Data Science
      </span>
      <span class="bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-green-300 dark:hover:bg-green-600 transition duration-300">
        Machine Learning
      </span>
      <span class="bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-yellow-300 dark:hover:bg-yellow-600 transition duration-300">
        Photography
      </span>
      <span class="bg-indigo-200 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-indigo-300 dark:hover:bg-indigo-600 transition duration-300">
        Gardening
      </span>
      <span class="bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-red-300 dark:hover:bg-red-600 transition duration-300">
        Travel
      </span>
      <span class="bg-teal-200 text-teal-800 dark:bg-teal-700 dark:text-teal-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-teal-300 dark:hover:bg-teal-600 transition duration-300">
        Cooking
      </span>
      <span class="bg-orange-200 text-orange-800 dark:bg-orange-700 dark:text-orange-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-orange-300 dark:hover:bg-orange-600 transition duration-300">
        Reading
      </span>
    </div>
  </div>
</div>

Verwandte Komponenten

Tag-Cloud-Komponente

Eine 3D-Tag-Cloud-Komponente mit leuchtenden Farben für Dashboards zur Datenvisualisierung.

Offen

Tag-Cloud-Komponente - Marktplatz Sepia/Braunes Materialdesign

Eine komplexe, reaktionsschnelle Tag-Cloud-Komponente, die für Marktplatzplattformen entwickelt wurde und Material Design-Prinzipien mit Sepia-/Brauntönen verwendet. Bietet interaktive Tags, Kategoriefilterung und Unterstützung für den Dunkelmodus.

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