Skeuomorphic Badges
A Skeuomorphic Badges Component with responsive effects and dark theme support.
HTML Code
<span class="inline-flex items-center rounded-md bg-gray-200 px-2.5 py-0.5 text-sm font-medium text-gray-800 shadow-md dark:bg-gray-700 dark:text-gray-200">
Badge
</span>
<span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 shadow-inner dark:bg-red-900 dark:text-red-200">
Badge
</span>
<span class="inline-flex items-center rounded-md bg-blue-50 px-3 py-1 text-base font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900 dark:text-blue-200 dark:ring-blue-200/10">
Badge
</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full bg-green-100 text-sm font-medium text-green-800 shadow-lg dark:bg-green-800 dark:text-green-100">
<svg class="-ml-1 mr-1.5 h-2 w-2 text-green-400 dark:text-green-600" fill="currentColor" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3" />
</svg>
Badge with dot
</span>Related Components
Badges Component
A responsive Badges component designed with microinteractions, featuring a complementary color scheme and dark theme support. Ideal for business and corporate websites, this component includes engaging animations that respond to user actions. Previously mentioned visual cues like hover effects enhance the user experience.
Badges Component
A responsive badges component with Material Design style, dark theme support, and earth tones color scheme for blog content.
Badges Component
Badges Component - Minimalist/Flat Design with responsive effects and dark theme support. No JavaScript, pure HTML and CSS with Tailwind.