Tag-Cloud-Komponente
Eine reaktionsschnelle Tag-Cloud-Komponente mit Graustufenfarben und Mikrointeraktionen, die für Social-Media-Schnittstellen mit Unterstützung für dunkle Themen entwickelt wurde.
HTML-Code
<div class="container mx-auto px-4 py-8 dark:bg-gray-900">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white">Popular Tags</h2>
</div>
<div class="flex flex-wrap justify-center gap-4">
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#webdevelopment</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#tailwindcss</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#javascript</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#css3</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#html5</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#react</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#vuejs</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#angular</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#nodejs</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#python</span>
</div>
</div>Verwandte Komponenten
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.
Tag-Cloud-Komponente
Eine reaktionsschnelle Tag-Cloud-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde und ein kontrastreiches Farbschema aufweist, das für Dashboards geeignet ist. Enthält Unterstützung für den Dunkelmodus und semantisches HTML für die Barrierefreiheit. Hover-Effekte sind für die Interaktivität enthalten.
Aquarell-/Kunst-Tag-Cloud-Komponente
Eine komplexe, reaktionsschnelle Tag-Cloud-Komponente mit einem Aquarell-/künstlerischen Designstil und einem pastellfarbenen Farbschema, geeignet für Foren-/Community-Plattformen. Unterstützt den Dunkelmodus.