Komponente "Neumorphic Badges"
Eine Sammlung interaktiver Badges, die in einem weichen, neumorphen Stil gestaltet sind und sich für Technologie-/SaaS-Anwendungen eignen. Bietet coole neutrale Farben, Unterstützung für den Dunkelmodus und Reaktionsfähigkeit.
HTML-Code
<div class="p-8 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans transition-colors duration-300">
<div class="flex flex-wrap gap-6 p-8 bg-gray-100 dark:bg-gray-800 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-4xl">
<!-- Active Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-blue-600 dark:text-blue-400
shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<span class="w-2.5 h-2.5 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse"></span>
<span class="text-sm font-semibold whitespace-nowrap">Active</span>
</button>
<!-- Pending Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-yellow-600 dark:text-yellow-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold whitespace-nowrap">Pending Review</span>
</button>
<!-- Success Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-green-600 dark:text-green-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold whitespace-nowrap">Completed</span>
</button>
<!-- Error Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-red-600 dark:text-red-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold whitespace-nowrap">Failed</span>
</button>
<!-- Info Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-gray-700 dark:text-gray-300
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold whitespace-nowrap">Informational</span>
</button>
<!-- New Feature Badge with avatar -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-purple-600 dark:text-purple-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-6 h-6 rounded-full object-cover shadow-md">
<span class="text-sm font-semibold whitespace-nowrap">New Update</span>
<span class="px-2 py-0.5 rounded-full text-xs font-bold bg-purple-200 text-purple-800
dark:bg-purple-800 dark:text-purple-200
shadow-inner">PRO</span>
</button>
<!-- Tag with image/icon -->
<button class="flex items-center gap-2 px-5 py-2 pr-3 rounded-full
bg-gray-100 dark:bg-gray-800
text-indigo-600 dark:text-indigo-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">
<img src="https://picsum.photos/id/237/20/20" alt="Tag Icon" class="w-5 h-5 rounded-full object-cover shadow-sm">
<span class="text-sm font-semibold whitespace-nowrap">Website</span>
</button>
</div>
</div>
<style>
/* Base styles for neumorphism shadows */
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #6d6d6d, -6px -6px 12px #939393;
}
/* Inset styles for pushed/active state */
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #6d6d6d, inset -5px -5px 10px #939393;
}
/* Add a subtle animation for the active dot */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-pulse {
animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Ensure all transitions are smooth */
.transition-colors {
transition-property: background-color, color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
</style>Verwandte Komponenten
Pastellfarbene Abzeichen Benutzeroberfläche im Dunkelmodus
Eine einfache, reaktionsschnelle Badges-Komponente für Unternehmenswebsites mit einer Benutzeroberfläche im Dunkelmodus mit Pastellfarben. Es wurde mit Tailwind CSS entwickelt, verwendet einen dunklen Hintergrund, um die Belastung der Augen zu reduzieren, und unterstützt ein responsives Layout.
Industrial_Candy_Finance_Badges_Component
Eine komplexe Badges-Komponente für das Finanz- und Bankwesen, die industrielle Ästhetik mit leuchtenden Bonbonfarben verbindet. Bietet mehrere interaktive Abzeichen, responsives Design und Unterstützung für den Dunkelmodus.
Badges-Komponente
Eine Abzeichenkomponente im Neumorphism-Stil für Blogs mit analogem Farbschema und reichhaltiger Benutzeroberfläche.