Glassmorphism コンテナコンポーネント

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600">
  <div class="container mx-auto p-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Feature 1 -->
      <div class="backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg transform transition duration-500 hover:scale-105">
        <h3 class="font-bold text-xl mb-4 text-gray-800 dark:text-white">Project Title 1</h3>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Image 1" class="rounded-md mb-4">
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the project. Showcasing skills and technologies used.</p>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:underline">View Details</a>
      </div>

      <!-- Feature 2 -->
      <div class="backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg transform transition duration-500 hover:scale-105">
        <h3 class="font-bold text-xl mb-4 text-gray-800 dark:text-white">Project Title 2</h3>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Image 2" class="rounded-md mb-4">
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the project. Showcasing skills and technologies used.</p>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:underline">View Details</a>
      </div>

      <!-- Feature 3 -->
      <div class="backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg transform transition duration-500 hover:scale-105">
        <h3 class="font-bold text-xl mb-4 text-gray-800 dark:text-white">Project Title 3</h3>
        <img src="https://picsum.photos/400/250?random=3" alt="Project Image 3" class="rounded-md mb-4">
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the project. Showcasing skills and technologies used.</p>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:underline">View Details</a>
      </div>
      
      <!-- Add more features as needed -->

        <!-- Contact/Profile Section -->
        <div class="md:col-span-2 lg:col-span-3 backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg text-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-24 h-24 mx-auto mb-4">
            <h3 class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Your Name</h3>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Web Developer | Designer | Portfolio Owner</p>
            <div class="flex justify-center space-x-4">
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300"><i class="fab fa-twitter"></i></a>
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300"><i class="fab fa-linkedin"></i></a>
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300"><i class="fab fa-github"></i></a>
            </div>
        </div>

    </div>
  </div>
</div>