Composant Profils utilisateur

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 relative group">
    <!-- Artistic Top Shape -->
    <div class="absolute inset-x-0 top-0 h-40 bg-gradient-to-r from-red-400 via-yellow-400 to-green-400 dark:from-red-700 dark:via-yellow-700 dark:to-green-700 opacity-70 clip-path-polygon-alt rounded-t-3xl">
      <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <filter id="watercolor-effect">
            <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="5" result="noise"/>
            <feDiffuseLighting in="noise" lightingColor="white" surfaceScale="2" result="diffuse"/>
            <feBlend in="SourceGraphic" in2="diffuse" mode="multiply"/>
          </filter>
        </defs>
        <rect width="100" height="100" fill="#FFF" filter="url(#watercolor-effect)" opacity="0.1"/>
      </svg>
    </div>

    <div class="relative p-6 pt-20 text-center">
      <!-- Profile Picture -->
      <div class="w-32 h-32 mx-auto rounded-full border-4 border-white dark:border-gray-700 overflow-hidden shadow-lg transform -translate-y-1/2 group-hover:scale-110 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Picture" class="w-full h-full object-cover">
      </div>

      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white -mt-8 mb-2 leading-tight">
        Anya Petrova
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-300 font-medium mb-4">
        Digital Artist & Illustrator
      </p>

      <div class="max-w-xs mx-auto mb-6 text-gray-700 dark:text-gray-400 text-sm leading-relaxed">
        Creating vibrant worlds through watercolors and digital strokes for a unique artistic experience.
      </div>

      <div class="flex justify-center flex-wrap gap-3 mb-6">
        <span class="px-4 py-1.5 rounded-full text-sm font-semibold whitespace-nowrap
                     bg-gradient-to-r from-blue-400 to-indigo-400 text-white shadow-md
                     hover:from-blue-500 hover:to-indigo-500 transition duration-200">
          Watercolor
        </span>
        <span class="px-4 py-1.5 rounded-full text-sm font-semibold whitespace-nowrap
                     bg-gradient-to-r from-green-400 to-teal-400 text-white shadow-md
                     hover:from-green-500 hover:to-teal-500 transition duration-200">
          Illustrations
        </span>
        <span class="px-4 py-1.5 rounded-full text-sm font-semibold whitespace-nowrap
                     bg-gradient-to-r from-purple-400 to-pink-400 text-white shadow-md
                     hover:from-purple-500 hover:to-pink-500 transition duration-200">
          Portraits
        </span>
      </div>

      <a href="#" class="inline-block px-8 py-3 rounded-full text-lg font-bold
                 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white shadow-lg
                 hover:shadow-xl hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600
                 transform hover:-translate-y-0.5 transition duration-300 ease-in-out
                 focus:outline-none focus:ring-4 focus:ring-purple-300 focus:ring-opacity-75 dark:focus:ring-purple-700">
        View Gallery
      </a>
    </div>

    <!-- Artistic Bottom Shape -->
    <div class="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-l from-orange-400 via-yellow-400 to-red-400 dark:from-orange-700 dark:via-yellow-700 dark:to-red-700 opacity-60 clip-path-polygon-alt-bottom rounded-b-3xl">
      <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <rect width="100" height="100" fill="#FFF" filter="url(#watercolor-effect)" opacity="0.1"/>
      </svg>
    </div>
  </div>
</div>

<style>
  /* This is an additional style block for custom clip-path properties, 
     as Tailwind currently doesn't support complex clip-path values directly 
     via utility classes without custom configuration. 
     In a real project, this would likely be in a global CSS file or configured 
     via Tailwind's theme extends. */
  .clip-path-polygon-alt {
    clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 85%, 50% 70%, 25% 85%, 0 70%);
  }
  .clip-path-polygon-alt-bottom {
    clip-path: polygon(0% 30%, 25% 15%, 50% 30%, 75% 15%, 100% 30%, 100% 100%, 0% 100%);
  }
</style>