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.
HTML Code
<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
<span class="px-3 py-1 text-sm font-medium text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">
Business
</span>
<span class="px-3 py-1 text-sm font-medium text-green-800 bg-green-200 rounded-full dark:bg-green-700 dark:text-green-100">
Corporate
</span>
<span class="px-3 py-1 text-sm font-medium text-blue-800 bg-blue-200 rounded-full dark:bg-blue-700 dark:text-blue-100">
Innovation
</span>
<span class="px-3 py-1 text-sm font-medium text-pink-800 bg-pink-200 rounded-full dark:bg-pink-700 dark:text-pink-100">
Strategy
</span>
<span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-200 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
Growth
</span>
</div>Related Components
Badges Component
A responsive Badges Component with Skeuomorphism style, Triadic color scheme, and simple complexity, designed for portfolios with dark theme support.
Neumorphic Badges Component
A collection of interactive badges designed in a soft neumorphic style, suitable for technology/SaaS applications. Features cool neutral colors, dark mode support, and responsiveness.
Badges Component
A Neumorphic Badges Component with Analogous color scheme for a Blog/Content website. It features a responsive design and dark theme support, using only HTML and Tailwind CSS.