すべてのコンポーネント

                <div class="relative h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden">
  <!-- Map Area -->
  <div class="absolute inset-0">
    <img src="https://picsum.photos/1600/900" alt="Map Background" class="w-full h-full object-cover filter blur-sm opacity-70">
  </div>

  <!-- Content Overlay -->
  <div class="relative z-10 flex items-center justify-center h-full">
    <div class="bg-white dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 rounded-lg shadow-xl p-6 max-w-md mx-auto transform transition duration-500 ease-in-out hover:scale-105">
      <div class="text-center">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Explore Connections Nearby</h2>
        
        <!-- User Avatars Grid with Microinteractions -->
        <div class="grid grid-cols-4 gap-4 mb-6">
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-pink-500 dark:border-pink-400 group-hover:border-pink-700 dark:group-hover:border-pink-600 transition duration-300 ease-in-out transform group-hover:scale-110">
            <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500 dark:bg-green-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 group-hover:border-blue-700 dark:group-hover:border-blue-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-yellow-500 dark:bg-yellow-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500 dark:border-purple-400 group-hover:border-purple-700 dark:group-hover:border-purple-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-gray-500 dark:bg-gray-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/women/91.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-500 dark:border-red-400 group-hover:border-red-700 dark:group-hover:border-red-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500 dark:bg-green-400"></span>
          </div>
           <div class="relative group">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-teal-500 dark:border-teal-400 group-hover:border-teal-700 dark:group-hover:border-teal-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-red-500 dark:bg-red-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-orange-500 dark:border-orange-400 group-hover:border-orange-700 dark:group-hover:border-orange-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500 dark:bg-green-400"></span>
          </div>
           <div class="relative group">
            <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-indigo-500 dark:border-indigo-400 group-hover:border-indigo-700 dark:group-hover:border-indigo-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-gray-500 dark:bg-gray-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/women/23.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-pink-500 dark:border-pink-400 group-hover:border-pink-700 dark:group-hover:border-pink-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500 dark:bg-green-400"></span>
          </div>
        </div>
        
        <!-- Interactive Buttons -->
        <div class="flex justify-center space-x-4">
          <button class="bg-pink-600 dark:bg-pink-700 text-white py-2 px-6 rounded-full font-semibold hover:bg-pink-700 dark:hover:bg-pink-800 transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
            Find Friends
          </button>
          <button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white py-2 px-6 rounded-full font-semibold hover:bg-gray-400 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
            View Map
          </button>
        </div>

        <!-- Status Indicators with Animations -->
        <div class="mt-6 text-sm text-gray-600 dark:text-gray-300">
          <p class="flex items-center justify-center">
            <span class="h-2 w-2 rounded-full bg-green-500 dark:bg-green-400 mr-2 animate-pulse"></span>
            5 friends online nearby
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
              

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">User Feedback</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Feedback Item -->
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            </div>
            <p class="text-gray-600 dark:text-gray-300">"The new dashboard layout is intuitive and allows for quick access to data. I really appreciate the improvements!"</p>
            <div class="mt-2">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
                <span class="text-yellow-500 font-bold">⭐⭐⭐⭐⭐</span>
            </div>
        </div>
        <!-- Feedback Item -->
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
            </div>
            <p class="text-gray-600 dark:text-gray-300">"Great features! However, I would like to see more customization options for the charts."</p>
            <div class="mt-2">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
                <span class="text-yellow-500 font-bold">⭐⭐⭐⭐</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-500" rows="4" placeholder="Leave your feedback here..."></textarea>
    </div>
    <button class="mt-4 bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Submit Feedback</button>
</div>
              

                <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-400 mb-4">Contact Us</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="text" id="name" placeholder="Your Name" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="email" id="email" placeholder="Your Email" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="message">Message</label>
            <textarea class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" id="message" rows="4" placeholder="Your Message" required></textarea>
        </div>
        <div class="flex items-center justify-between">
            <button type="submit" class="bg-pink-600 text-white font-bold py-2 px-4 rounded hover:bg-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 dark:bg-pink-500 dark:hover:bg-pink-400">Send</button>
        </div>
    </form>
    <div class="mt-6 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <p class="text-gray-600 dark:text-gray-300">Stay connected with us!</p>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="rounded-md shadow-md object-cover w-full">
    </div>
</div>
              

                <div class="bg-gray-300 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Data Visualization</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Chart Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Sales Analytics</h3>
      <img src="https://picsum.photos/400/200?random=1" alt="Sales Chart" class="rounded-md" />
      <p class="text-gray-600 dark:text-gray-400 mt-2">An overview of sales performance over the last year.</p>
    </div>
    <!-- Chart Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">User Engagement</h3>
      <img src="https://picsum.photos/400/200?random=2" alt="User Engagement Chart" class="rounded-md" />
      <p class="text-gray-600 dark:text-gray-400 mt-2">Statistics related to user interaction across different platforms.</p>
    </div>
    <!-- Profile Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl col-span-1 md:col-span-2">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Team Profile</h3>
      <div class="flex items-center mb-3">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-12 h-12 rounded-full mr-3" />
        <div class="text-gray-900 dark:text-gray-100">
          <p class="font-semibold">Jane Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
        </div>
      </div>
      <p class="text-gray-600 dark:text-gray-400">Jane specializes in data analysis and machine learning, with over 5 years of experience.</p>
    </div>
  </div>
</div>
              

                <div x-data='{ open: false }' class='max-w-md mx-auto bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md overflow-hidden md:max-w-lg my-4'>
    <div class='md:flex'>
        <div class='w-full p-4'>
            <div class='flex justify-between items-center'>
                <h2 class='text-lg leading-6 font-medium text-stone-900 dark:text-stone-100'>Accordion Title 1</h2>
                <button x-on:click='open = !open' class='text-stone-500 dark:text-stone-300 hover:text-stone-600 dark:hover:text-stone-400 focus:outline-none'>
                    <svg class='h-6 w-6 transform' :class='{ "rotate-180": open }' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
                    </svg>
                </button>
            </div>
            <div x-show='open' class='mt-2 text-sm text-stone-600 dark:text-stone-400'>
                <p>This is the collapsible content for Accordion Item 1. It provides additional information or details related to the title. The design is simple and follows Material Design principles with subtle shadows and rounded corners.</p>
            </div>
        </div>
    </div>
</div>

<div x-data='{ open: false }' class='max-w-md mx-auto bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md overflow-hidden md:max-w-lg my-4'>
    <div class='md:flex'>
        <div class='w-full p-4'>
            <div class='flex justify-between items-center'>
                <h2 class='text-lg leading-6 font-medium text-stone-900 dark:text-stone-100'>Accordion Title 2</h2>
                <button x-on:click='open = !open' class='text-stone-500 dark:text-stone-300 hover:text-stone-600 dark:hover:text-stone-400 focus:outline-none'>
                    <svg class='h-6 w-6 transform' :class='{ "rotate-180": open }' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
                    </svg>
                </button>
            </div>
            <div x-show='open' class='mt-2 text-sm text-stone-600 dark:text-stone-400'>
                <p>This is the collapsible content for Accordion Item 2. You can add more text, images, or other HTML elements here. The triadic color scheme is subtly applied through text and background colors that are somewhat evenly spaced on the color wheel, like various shades of grey/stone which could be paired with other triadic colors like orange and green in a larger layout.</p>
            </div>
        </div>
    </div>
</div>
              

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Our Team</h2>
    <div class="grid md:grid-cols-2 gap-5">
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/200" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">John Doe</p>
                    <p class="text-sm text-gray-400">CEO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">John is the visionary behind the company, driving innovation and strategies.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/201" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">Jane Smith</p>
                    <p class="text-sm text-gray-400">CTO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">Jane oversees all technical aspects, ensuring seamless operations.</p>
        </div>
    </div>
    <h2 class="text-2xl font-bold mt-10 mb-4">Company Achievements</h2>
    <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
        <ul class="list-disc list-inside">
            <li class="mt-2 text-gray-300">Awarded "Best Startup of the Year".</li>
            <li class="mt-2 text-gray-300">Reached over 10,000 active users in under a year.</li>
            <li class="mt-2 text-gray-300">Secured $1 million in funding.</li>
        </ul>
    </div>
</div>
              

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login with Social Media</h2>
        <div class="flex flex-col space-y-4">
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Google Logo"> Login with Google
            </button>
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Facebook Logo"> Login with Facebook
            </button>
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="LinkedIn Logo"> Login with LinkedIn
            </button>
        </div>
        <div class="mt-4 text-center text-gray-600 dark:text-gray-400">
            <p>Or login with your email</p>
        </div>
        <div class="mt-4 flex flex-col space-y-4">
            <input type="email" placeholder="Email" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
            <input type="password" placeholder="Password" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
            <button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-200">Login</button>
        </div>
    </div>
</div>
              

                <div class="flex items-center justify-between p-4 bg-pastel-light dark:bg-pastel-dark rounded-lg shadow-lg">
    <div class="flex items-center">
        <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
        <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
    </div>
    <button class="flex items-center p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
        <div class="hamburger"> 
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200"></div>
        </div>
    </button>
</div>

<div class="hidden lg:block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg mt-2">
    <ul class="space-y-2">
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">User Profile</span>
        </li>
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">Settings</span>
        </li>
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">Logout</span>
        </li>
    </ul>
</div>

<style>
.hamburger {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>
              

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-700">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Connect with Us</h2>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="Google Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with Google</span>
            </a>
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="Facebook Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with Facebook</span>
            </a>
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="GitHub Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with GitHub</span>
            </a>
        </div>
    </div>
</div>
              

                <div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 1</h2>
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-green-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 2</h2>
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>

  <div class="mt-8 relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-red-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
    <div class="relative z-10">
      <h2 class="text-2xl font-bold mb-4">Key Finding</h2>
      <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>