Columns Component Neumorphism
Columns Component Neumorphism - A soft UI style that creates elements appearing to extrude from the background using subtle shadows. this component is responsive and have dark theme support. No JavaScript code is needed. For dark mode, CSS support is sufficient.
HTML Code
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 p-4 dark:bg-gray-800">
<div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 1</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 2</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 3</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<style>
/* Basic Neumorphism shadows - adjust values for desired effect */
.shadow-xl {
box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
}
.dark .shadow-xl-dark {
box-shadow: 8px 8px 15px #444444, -8px -8px 15px #333333;
}
</style>Related Components
Columns Component
A responsive columns component designed for portfolio showcasing with dark mode support, using a grayscale color scheme and Tailwind CSS.
Columns Component
A minimalist columns component with a grayscale color scheme designed for social networking interfaces. It features a responsive layout with dark theme support.