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
Pastel Badges Dark Mode UI
A simple, responsive badges component for business websites, featuring a dark mode UI with pastel colors. Designed with Tailwind CSS, it uses a dark background to reduce eye strain and supports a responsive layout.
Badges Component
Badges Component - Minimalist/Flat Design with responsive effects and dark theme support. No JavaScript, pure HTML and CSS with Tailwind.
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.