Badges-Komponente
Eine einfache Badge-Komponente im Glassmorphism-Stil für soziale Medien mit Milchglaseffekten mit Unschärfe, analogen Farben und Unterstützung für den Dunkelmodus mit Tailwind CSS. Es ist reaktionsschnell und verwendet picsum.photos für Bilder und randomuser.me für Avatare, wo nötig. Es ist kein JavaScript enthalten.
HTML-Code
<div class="flex flex-wrap gap-2 p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-indigo-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-indigo-700 dark:text-gray-200">
#SocialLife
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-purple-700 dark:text-gray-200">
#Connections
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-blue-700 dark:text-gray-200">
#Community
</span>
</div>Verwandte Komponenten
Badges-Komponente
Eine saubere, minimalistische Badge-Komponente, die für Buchungs-/Reservierungssysteme entwickelt wurde, mit responsivem Layout, pastellfarbenem Farbschema und Unterstützung des Dunkelmodus, inspiriert von der schweizerischen/internationalen Typografie.
Badges-Komponente
Eine einfache und reaktionsschnelle Badges-Komponente, die mit einer 3D-Ästhetik und einem komplementären Farbschema für den Konsum von Blogs und Inhalten entwickelt wurde. Unterstützt den Dunkelmodus.
Badges-Komponente
Badges-Komponente mit responsiver Unterstützung für dunkles Design für E-Commerce.