Neumorphism Functional Component
A web component following the Neumorphism design style, built with Tailwind CSS. It supports responsive design and dark mode purely through CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
<div class="w-full max-w-sm bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar" class="w-24 h-24 rounded-full shadow-neumorphic-inset dark:shadow-neumorphic-dark-inset mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Jane Doe</h2>
<p class="text-gray-600 dark:text-gray-300 text-center mb-6">Frontend Developer | Neumorphism Enthusiast</p>
<div class="flex justify-around w-full">
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
</svg>
</button>
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</button>
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0l-6 6"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<style>
.shadow-neumorphic {
box-shadow: 7px 7px 15px #a7a7a7,
-7px -7px 15px #ffffff;
}
.shadow-neumorphic-inset {
box-shadow: inset 7px 7px 15px #a7a7a7,
inset -7px -7px 15px #ffffff;
}
.shadow-neumorphic-press {
box-shadow: inset 5px 5px 10px #a7a7a7,
inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #4b5563,
-7px -7px 15px #374151;
}
.dark .shadow-neumorphic-dark-inset {
box-shadow: inset 7px 7px 15px #4b5563,
inset -7px -7px 15px #374151;
}
.dark .shadow-neumorphic-dark-press {
box-shadow: inset 5px 5px 10px #4b5563,
inset -5px -5px 10px #374151;
}
</style>Related Components
Art Deco Purple Documentation Component
A moderate complexity documentation/wiki component with an Art Deco design theme, featuring geometric patterns and luxurious styling using a purple/violet color spectrum. Fully responsive with dark mode support.
Glassmorphic Music Player Controls
A glassmorphic music player control component with sepia/brown tones, featuring frosted glass-like translucent elements and blur effects. It's responsive, supports dark mode, and is suitable for music streaming and audio platforms.
Healthcare Functional Component
A responsive and thematic component for healthcare applications, featuring industrial design, muted colors, and dark mode support. Displays patient/sensor data with quick actions.