Neumorphism Badges
This is a Neumorphism-style Badges Component with a Pastel color scheme, designed for a Portfolio and using Tailwind CSS.
HTML Code
<div class="flex flex-wrap justify-center gap-4 p-4 bg-gray-200 dark:bg-gray-800">
<span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
HTML
</span>
<span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
CSS
</span>
<span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
Tailwind CSS
</span>
nocode
</div>
<style>
.shadow-neumorphism-light {
box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 5px 5px 10px #454545, -5px -5px 10px #3a3a3a;
}
</style>Related Components
Memphis_Pastel_Food_Badges_Component
A complex, responsive badges component for food/restaurant websites, inspired by Memphis Design with a pastel color scheme. Features geometric shapes, playful patterns, and includes dark mode support.
3D_Badge_Component
A simple, responsive 3D-inspired badge component for blog/content, featuring high-contrast colors and dark mode support.
Skeuomorphic Badges
A set of badges with a skeuomorphic design, complementary color scheme, and simple layout, suitable for a blog or content site. Responsive with dark mode support.