Tag-Cloud-Komponente
Eine komplexe, reaktionsschnelle Tag Cloud-Komponente mit Mikrointeraktionen, die für ein Dashboard entwickelt wurde und ein Graustufen-Farbschema verwendet. Unterstützt den Dunkelmodus.
HTML-Code
<div class="dark:bg-gray-900 bg-white p-6 rounded-lg shadow-xl">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Tag Cloud</h2>
<div class="flex flex-wrap gap-3">
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Technology</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Finance</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Healthcare</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Education</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Sports</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Science</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Art</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Travel</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Food</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
</div>
</div>Verwandte Komponenten
Tag-Cloud-Komponente
Eine neumorphe Tag-Cloud-Komponente, die für ein Portfolio entwickelt wurde und Tags mit einem monochromatischen Farbschema, einem responsiven Layout und Unterstützung für den Dunkelmodus mithilfe von Tailwind CSS präsentiert.
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.
Tag-Cloud-Komponente
Eine reaktionsschnelle Tag-Cloud-Komponente mit einem Monospace-/Entwicklerdesign, Neon-/Elektro-Farbschema und Unterstützung für den Dunkelmodus, geeignet für Unterhaltungs-/Medienplattformen.