拟物化容器组件

<div class="relative dark:bg-gray-900 bg-gray-200 p-8 rounded-xl shadow-2xl dark:shadow-gray-700 m-4 sm:m-8 lg:m-12">
  <!-- Top-left highlight -->
  <div class="absolute top-0 left-0 w-20 h-20 bg-gradient-to-br from-gray-100 to-transparent rounded-tl-xl opacity-30 dark:from-gray-700"></div>
  <!-- Bottom-right shadow -->
  <div class="absolute bottom-0 right-0 w-20 h-20 bg-gradient-to-tl from-gray-300 to-transparent rounded-br-xl opacity-30 dark:from-gray-800"></div>

  <div class="relative z-10">
    <h2 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 text-center">
      My Portfolio
    </h2>
    <p class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed mb-8 text-center">
      Welcome to my digital space. Explore my work and get to know my professional journey.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Project Card 1 -->
      <div class="bg-gray-300 dark:bg-gray-800 rounded-lg p-6 shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-gray-400 dark:border-gray-700">
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="rounded-md mb-4 w-full h-48 object-cover shadow-inner dark:shadow-gray-900">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Alpha</h3>
        <p class="text-gray-700 dark:text-gray-300 text-base">A detailed look into an innovative web solution built for scalability and performance.</p>
      </div>

      <!-- Project Card 2 -->
      <div class="bg-gray-300 dark:bg-gray-800 rounded-lg p-6 shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-gray-400 dark:border-gray-700">
        <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="rounded-md mb-4 w-full h-48 object-cover shadow-inner dark:shadow-gray-900">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Design Showcase</h3>
        <p class="text-gray-700 dark:text-gray-300 text-base">Exploring user-centric design principles through a series of interactive prototypes.</p>
      </div>

      <!-- Project Card 3 -->
      <div class="bg-gray-300 dark:bg-gray-800 rounded-lg p-6 shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-gray-400 dark:border-gray-700">
        <img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="rounded-md mb-4 w-full h-48 object-cover shadow-inner dark:shadow-gray-900">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Mobile App Development</h3>
        <p class="text-gray-700 dark:text-gray-300 text-base">From concept to deployment: a robust mobile application for everyday productivity.</p>
      </div>
    </div>

    <div class="mt-12 text-center">
      <a href="#" class="inline-block bg-gray-400 dark:bg-gray-700 text-gray-800 dark:text-gray-100 font-bold py-3 px-8 rounded-full shadow-md hover:bg-gray-500 dark:hover:bg-gray-600 transition-colors duration-300 transform hover:scale-105">
        View All Projects
      </a>
    </div>

    <div class="mt-12 pt-8 border-t border-gray-400 dark:border-gray-700 text-center">
      <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">About Me</h3>
      <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-8">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-gray-400 dark:border-gray-600 shadow-lg">
        <p class="text-gray-700 dark:text-gray-300 max-w-lg text-base">
          I am a passionate developer with expertise in creating dynamic and responsive web applications. I thrive on bringing innovative ideas to life through clean and efficient code.
        </p>
      </div>
    </div>
  </div>
</div>