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

Tag-Cloud-Komponente

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

Vorschau

HTML-Code 

<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
  <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-blue-700 transform transition duration-300 hover:scale-110 hover:rotate-3" style="perspective: 1000px; transform: rotateY(15deg) rotateX(5deg);">Marketing Analysis</span>
  <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-red-700 transform transition duration-300 hover:scale-110 hover:-rotate-6" style="perspective: 1000px; transform: rotateY(-10deg) rotateX(-3deg);">Sales Performance</span>
  <span class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-green-700 transform transition duration-300 hover:scale-110 hover:rotate-4" style="perspective: 1000px; transform: rotateY(5deg) rotateX(10deg);">Customer Feedback</span>
  <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-yellow-700 transform transition duration-300 hover:scale-110 hover:-rotate-4" style="perspective: 1000px; transform: rotateY(-5deg) rotateX(8deg);">Product Development</span>
  <span class="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-purple-700 transform transition duration-300 hover:scale-110 hover:rotate-2" style="perspective: 1000px; transform: rotateY(10deg) rotateX(-6deg);">Financial Reporting</span>
  <span class="bg-pink-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-pink-700 transform transition duration-300 hover:scale-110 hover:-rotate-2" style="perspective: 1000px; transform: rotateY(-8deg) rotateX(4deg);">Operational Efficiency</span>
  <span class="bg-indigo-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-indigo-700 transform transition duration-300 hover:scale-110 hover:rotate-5" style="perspective: 1000px; transform: rotateY(12deg) rotateX(-2deg);">Market Trends</span>
</div>

Verwandte Komponenten

Tag-Cloud-Komponente für die Landwirtschaft/Ackerbau

Eine minimalistische und reaktionsschnelle Tag-Cloud-Komponente, die für landwirtschaftliche Websites entwickelt wurde, mit coolen neutralen Farben und Unterstützung für den Dunkelmodus.

Offen

Art Deco Tag Cloud-Komponente

Eine reaktionsschnelle Tag-Cloud-Komponente, die im Art-Déco-Stil gestaltet wurde, mit geometrischen Mustern und luxuriösen Blautönen, die für Social-Media-Schnittstellen geeignet ist. Enthält Unterstützung für den Dunkelmodus.

Offen

Glassmorphism Tag Cloud-Komponente

Eine Tag-Cloud-Komponente im Glassmorphism-Stil mit violettem Farbschema, die für Portfolios geeignet ist. Verfügt über mattierte, durchscheinende Elemente, responsives Design und Unterstützung für den Dunkelmodus.

Offen