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
Skeuomorphe Abzeichen
Eine Skeuomorphic Badges-Komponente mit responsiven Effekten und Unterstützung für dunkle Themen.
Skeuomorphe Abzeichen
Eine Reihe von Abzeichen mit einem skeuomorphen Design, einem komplementären Farbschema und einem einfachen Layout, geeignet für einen Blog oder eine Content-Site. Reaktionsschnell mit Unterstützung für den Dunkelmodus.
Abzeichen Komponente 48
Eine Badges-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde und responsive Layouts und Unterstützung für dunkle Designs mit Tailwind CSS bietet.