Tag-Cloud-Komponente 13
Eine Tag-Cloud-Komponente, die im Neumorphism-Stil entworfen wurde. Es verfügt über einen Soft-UI-Stil mit Elementen, die mit subtilen Schatten aus dem Hintergrund herauszuragen scheinen. Die Komponente unterstützt responsives Design und dunkle Themen.
HTML-Code
<div class="flex flex-wrap justify-center p-8 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg">
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 1
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 2
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 3
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 4
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 5
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 6
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 7
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 8
</a>
</div>
</div>
<style>
.shadow-neumorphism {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
-10px -10px 20px rgba(255, 255, 255, 0.5);
}
</style>Verwandte Komponenten
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.
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.