Components Cards Neumorphic Cards Component

Neumorphic Cards Component

A responsive cards component designed in the Neumorphism style with dark theme support, featuring subtle shadows and flexible layout.

Preview

HTML Code

<div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/200/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">This is a short description of the card content.</p>
        </div>
        <div class="flex items-center mt-4">
            <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">User Name</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/201/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Another Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">More details about the content of this card.</p>
        </div>
        <div class="flex items-center mt-4">
            <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">Another User</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/202/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Third Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of the card content goes here.</p>
        </div>
        <div class="flex items-center mt-4">
            <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">User Three</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
</div>

Related Components

Forum_Community_Cards_Component

A responsive and interactive cards component for a forum or community platform, featuring a retro/vintage color scheme and subtle hover effects for microinteractions. Includes dark mode support and semantic HTML.

Open

Luxury_Portfolio_Cards_Ocean_Blue

A complex, luxury/premium portfolio cards component designed with ocean/blue tones for showcasing work or products. Features responsive design, sophisticated typography, elegant visuals, and full dark mode support.

Open

Bauhaus Weather Cards Component

A simple, responsive weather/climate cards component inspired by Bauhaus design principles, featuring geometric forms and a triadic color scheme. Includes dark mode support.

Open