拟物 Columns 组件

<div class="p-8">

    <!-- Light Mode Container -->
    <div class="neumorphism-container relative z-10 max-w-6xl mx-auto p-8 rounded-2xl shadow-neumorphism-light bg-gray-200 dark:bg-gray-800 dark:shadow-neumorphism-dark">

        <!-- Dark Mode Toggle - Simple Example -->
        <div class="absolute top-4 right-4">
            <button class="p-2 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707m-9.193 9.193l-.707.707M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </button>
        </div>

        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8">My Portfolio</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            <!-- Portfolio Item 1 -->
            <div class="neumorphism-item p-6 rounded-xl shadow-neumorphism-light bg-gray-300 dark:bg-gray-700 dark:shadow-neumorphism-dark transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="rounded-lg mb-4 shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of Project 1, highlighting key features and technologies used.</p>
                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
            </div>

            <!-- Portfolio Item 2 -->
            <div class="neumorphism-item p-6 rounded-xl shadow-neumorphism-light bg-gray-300 dark:bg-gray-700 dark:shadow-neumorphism-dark transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="rounded-lg mb-4 shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of Project 2, highlighting key features and technologies used.</p>
                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
            </div>

            <!-- Portfolio Item 3 -->
            <div class="neumorphism-item p-6 rounded-xl shadow-neumorphism-light bg-gray-300 dark:bg-gray-700 dark:shadow-neumorphism-dark transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="rounded-lg mb-4 shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of Project 3, highlighting key features and technologies used.</p>
                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
            </div>

        </div>

        <!-- About Section - Example -->
        <div class="neumorphism-item mt-12 p-8 rounded-xl shadow-neumorphism-light bg-gray-300 dark:bg-gray-700 dark:shadow-neumorphism-dark">
            <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">About Me</h3>
            <div class="flex flex-col md:flex-row items-center">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="rounded-full w-24 h-24 mb-4 md:mb-0 md:mr-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
                <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>

    </div>
</div>

<style>
ul,
li {
    list-style: unset
}

/* Base styles for Neumorphism */
.shadow-neumorphism-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.shadow-neumorphism-dark {
    box-shadow: 7px 7px 15px #4b4b4b, -7px -7px 15px #333333;
}

.shadow-inner-neumorphism-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}

.shadow-inner-neumorphism-dark {
    box-shadow: inset 5px 5px 10px #4b4b4b, inset -5px -5px 10px #333333;
}

/* Adjustments for dark mode */
body.dark .neumorphism-container {
    background-color: #2d3748;
    /* dark gray */
    box-shadow: 7px 7px 15px #1a202c, -7px -7px 15px #3f4a59;
    /* dark mode shadows */
}

body.dark .neumorphism-item {
    background-color: #4a5568;
    /* darker gray */
    box-shadow: 7px 7px 15px #1a202c, -7px -7px 15px #3f4a59;
    /* dark mode shadows */
}
</style>