Composantes interactives

                <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 rounded-lg shadow-neumorph p-6 w-80 text-center">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="w-full rounded-md mb-4">
        <div class="mb-2">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mx-auto shadow-md">
        </div>
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
        <button class="mt-4 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium py-2 px-4 rounded-lg shadow-neumorph transform transition-all hover:scale-105 hover:shadow-lg">Follow</button>
    </div>
</div>

<style>
    .shadow-neumorph {
        box-shadow:  8px 8px 15px rgba(0, 0, 0, 0.1), 
                    -8px -8px 15px rgba(255, 255, 255, 0.7);
    }
</style>
              

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm mx-auto">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
    </div>
  </div>

  <div class="mt-4">
    <img class="w-full rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random Image">
  </div>

  <div class="mt-4">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Me</h3>
    <p class="text-gray-600 dark:text-gray-400">I'm a passionate software engineer with experience in building web applications. I love coding and exploring new technologies.</p>
  </div>

  <div class="mt-4 flex justify-between">
    <a href="#" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Connect</a>
    <a href="#" class="px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:border-gray-400 dark:border-gray-700 dark:text-gray-400">Message</a>
  </div>
</div>