Badges Component
A simple, responsive badges component with dark mode support, using a triadic color scheme suitable for a portfolio.
HTML Code
<div class="dark:bg-gray-900 min-h-screen p-8">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">My Skills</h2>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100">HTML</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100">CSS</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Tailwind CSS</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">JavaScript</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100">React</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100">Python</span>
</div>
</div>
</div>Related Components
Badges Component
A responsive Badges component with engaging microinteractions, designed using Tailwind CSS. Supports dark mode and includes image placeholders.
Badges Component - Dark Mode Earth Tones
A complex badges component system designed with earth tones for a dark mode blog/content interface. The component includes various badge types for article categories, user status, content tags, notifications, and achievement indicators. All using natural earth tone colors with dark mode support. The design is fully responsive and adapts to different screen sizes.
Neumorphism Badges
This is a Neumorphism-style Badges Component with a Pastel color scheme, designed for a Portfolio and using Tailwind CSS.