Rechercher des composants

Catégories

Composants Profils d’utilisateurs

Profils d’utilisateurs

Affichage des informations et de l’activité de l’utilisateur

Composant Profils d’utilisateur neumorphes

Un composant complexe et réactif de profils d’utilisateurs avec un style de conception neumorphique et une palette de couleurs océan/bleu, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-blue-100 dark:bg-gray-900 min-h-screen py-12 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-500">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-blue-900 dark:text-blue-200 text-center mb-12 sm:text-5xl lg:text-6xl drop-shadow-lg">
      Our Esteemed Team
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
      <!-- Profile Card 1 -->
      <div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
        <div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
          <img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile of Jane Doe">
          <div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
        </div>
        <h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
          Jane Doe
        </h3>
        <p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">CEO, Founder</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
          </a>
        </div>
        <p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
          "Innovating the future, one elegant solution at a time."
        </p>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
        <div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
          <img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Profile of Mark Johnson">
          <div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
        </div>
        <h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
          Mark Johnson
        </h3>
        <p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">Lead Developer</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
          </a>
        </div>
        <p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
          "Crafting robust and scalable software solutions with passion."
        </p>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
        <div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
          <img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Profile of Sarah Lee">
          <div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
        </div>
        <h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
          Sarah Lee
        </h3>
        <p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">Head of Marketing</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
          </a>
        </div>
        <p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
          "Driving brand growth with creative strategies and data-driven insights."
        </p>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
        </div>
      </div>

      <!-- Profile Card 4 -->
      <div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
        <div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
          <img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Profile of David Chen">
          <div class="absolute bottom-0 right-0 w-8 h-8 bg-red-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
        </div>
        <h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
          David Chen
        </h3>
        <p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">Financial Advisor</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
          </a>
        </div>
        <p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
          "Guiding clients towards financial success with strategic insights."
        </p>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
        </div>
      </div>

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

<style>
  /* Custom CSS for Neumorphism Shadows */
  .shadow-custom-light {
    box-shadow: 8px 8px 16px #94c8e7, -8px -8px 16px #d4efff;
  }
  .dark .shadow-custom-dark {
    box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #3a4b6b;
  }
  .shadow-custom-hover-light {
    box-shadow: inset 6px 6px 12px #94c8e7, inset -6px -6px 12px #d4efff;
  }
  .dark .shadow-custom-hover-dark {
    box-shadow: inset 6px 6px 12px #1a202c, inset -6px -6px 12px #3a4b6b;
  }

  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #94c8e7, inset -5px -5px 10px #d4efff;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #3a4b6b;
  }

  .shadow-inner-neumorphic-light {
    box-shadow: inset 3px 3px 6px #94c8e7, inset -3px -3px 6px #d4efff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 3px 3px 6px #1a202c, inset -3px -3px 6px #3a4b6b;
  }

  .shadow-small-neumorphic-light {
    box-shadow: 3px 3px 6px #94c8e7, -3px -3px 6px #d4efff;
  }
  .dark .shadow-small-neumorphic-dark {
    box-shadow: 3px 3px 6px #1a202c, -3px -3px 6px #3a4b6b;
  }
  .shadow-small-neumorphic-inset-light {
    box-shadow: inset 2px 2px 4px #94c8e7, inset -2px -2px 4px #d4efff;
  }
  .dark .shadow-small-neumorphic-inset-dark {
    box-shadow: inset 2px 2px 4px #1a202c, inset -2px -2px 4px #3a4b6b;
  }

  .shadow-neumorphic-circle-light {
    box-shadow: 2px 2px 5px #94c8e7, -2px -2px 5px #d4efff;
  }
  .dark .shadow-neumorphic-circle-dark {
    box-shadow: 2px 2px 5px #1a202c, -2px -2px 5px #3a4b6b;
  }

  .shadow-neumorphic-thumb-light {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-neumorphic-thumb-dark {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(60, 60, 60, 0.7);
  }
<\/style>

Composant Profils d’utilisateur Art Déco en niveaux de gris

Un composant de profils d’utilisateur réactif avec un design géométrique Art Déco en niveaux de gris, adapté aux sites d’emploi ou aux plateformes de carrière, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 font-sans p-4 sm:p-6 md:p-8 flex items-center justify-center">
  <div class="w-full max-w-6xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    <!-- User Profile Card 1 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <!-- Art Deco Border Element -->
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile of Jane Doe" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">Jane Doe</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Senior Software Engineer</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            San Francisco, CA
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Full-time
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            5+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">React</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Node.js</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">AWS</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

    <!-- User Profile Card 2 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile of John Smith" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">John Smith</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Product Manager</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            New York, NY
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Full-time
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            8+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Agile</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Roadmapping</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">Market Analysis</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

    <!-- User Profile Card 3 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile of Sarah Lee" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">Sarah Lee</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">UX Designer</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            Austin, TX
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Contract
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            6+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Figma</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">User Research</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">Prototyping</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

    <!-- User Profile Card 4 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Profile of David Chen" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">David Chen</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Data Scientist</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            Seattle, WA
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Full-time
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            4+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Python</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Machine Learning</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">SQL</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

  </div>
</div>

Composant Profils utilisateur

Un composant de profils d’utilisateurs réactif pour les organisations à but non lucratif/caritatives, avec un design luxueux/haut de gamme avec des tons bleus professionnels, la prise en charge du mode sombre et une typographie sophistiquée.

Ouvrir Aperçu

                <section class="py-12 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-extrabold tracking-tight text-blue-800 dark:text-blue-400 sm:text-5xl">
        Meet Our Dedicated Team
      </h2>
      <p class="mt-4 text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
        Our passionate individuals are committed to making a difference. Learn more about the people behind our mission.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Profile Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Johnson">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Alice Johnson</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Executive Director</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Alice leads our organization with a vision for positive change, driving initiatives and partnerships.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark Stevens">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Mark Stevens</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Head of Programs</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Mark designs and implements our core programs, ensuring maximum impact on the communities we serve.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/78.jpg" alt="Sarah Kim">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Sarah Kim</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Community Outreach Manager</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Sarah connects us with communities, building relationships and understanding local needs for effective support.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/50.jpg" alt="David Lee">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">David Lee</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Volunteer Coordinator</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              David manages our amazing volunteers, ensuring they are well-supported and effectively deployed.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/62.jpg" alt="Emily White">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Emily White</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Events & Fundraising Manager</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Emily orchestrates our fundraising events, engaging donors and raising vital funds for our causes.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Michael Brown">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Michael Brown</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Communications Specialist</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Michael shares our story with the world, crafting compelling narratives and engaging content.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Glassmorphism Composant Profils Utilisateur (Simple)

Un composant de profil utilisateur simple et réactif avec un style de conception glassmorphism, une palette de couleurs pastel et une prise en charge du mode sombre. Idéal pour les plateformes de divertissement/médias.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl backdrop-blur-md bg-white/30 dark:bg-gray-800/30 border border-white/50 dark:border-gray-700/50 relative overflow-hidden">
    
    <!-- Background Blur Effect (for glassmorphism) -->
    <div class="absolute inset-0 z-0 opacity-50 dark:opacity-20">
      <div class="absolute top-0 left-0 w-32 h-32 bg-purple-300 dark:bg-purple-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:animate-blob-dark"></div>
      <div class="absolute top-0 right-0 w-32 h-32 bg-pink-300 dark:bg-pink-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:animate-blob-dark dark:animation-delay-2000"></div>
      <div class="absolute bottom-0 left-1/2 w-32 h-32 bg-blue-300 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:animate-blob-dark dark:animation-delay-4000"></div>
    </div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <img class="w-24 h-24 rounded-full border-4 border-white/70 dark:border-gray-600/70 shadow-lg object-cover mb-4"
        src="https://randomuser.me/api/portraits/women/68.jpg"
        alt="User Avatar">

      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1 tracking-wide">
        Alice Johnson
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 font-medium">
        Premium User
      </p>

      <div class="flex space-x-6 mb-6">
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">1.2K</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Followers</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">500</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Following</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">25</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Playlists</span>
        </div>
      </div>

      <button class="w-full py-3 px-6 rounded-xl bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-600 dark:to-pink-600 
                     text-white font-semibold text-lg shadow-md 
                     hover:from-purple-500 hover:to-pink-500 dark:hover:from-purple-700 dark:hover:to-pink-700 
                     focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-300 dark:focus:ring-offset-gray-800 dark:focus:ring-purple-700/50 
                     transition-all duration-300 transform hover:-translate-y-0.5">
        View Profile
      </button>
    </div>
  </div>
</div>

<!-- To make the background blobs animate, you'd typically add a CSS @keyframes in a <style> tag or global CSS. For Tailwind, you can extend the config. -->
<!-- Example for tailwind.config.js (not part of the HTML output, but for context): -->
<!--
  theme: {
    extend: {
      keyframes: {
        blob: {
          '0%, 100%': {
            transform: 'translate(0px, 0px) scale(1)'
          },
          '33%': {
            transform: 'translate(30px, -50px) scale(1.1)'
          },
          '66%': {
            transform: 'translate(-20px, 20px) scale(0.9)'
          }
        }
      },
      animation: {
        blob: 'blob 7s infinite ease-in-out',
        'blob-dark': 'blob 10s infinite ease-in-out'
      }
    }
  }
-->

Composant Profils utilisateur

Un composant de profil utilisateur complexe, inspiré de la 3D, conçu pour les systèmes de réservation, avec des neutres froids, une réactivité et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
    <!-- Profile Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">Jane Doe</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Senior Stylist</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Highly experienced stylist specializing in modern cuts and vibrant color treatments.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>5 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Certified</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <!-- 3D effect layers -->
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

    <!-- Profile Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">John Smith</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Master Barber</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Dedicated master barber with a keen eye for classic and contemporary men's grooming.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>8 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Awarded</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

    <!-- Profile Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">Emily White</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Esthetician</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Expert esthetician, passionate about skincare and providing rejuvenating facial treatments.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>3 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Licensed</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

  </div>
</div>

Composant Profils utilisateur - Thème Forêt Sombre

Un composant de profil utilisateur simple et réactif conçu pour les plateformes immobilières, avec une palette de couleurs vert forêt foncé et une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden max-w-sm sm:max-w-md md:max-w-lg w-full transform transition duration-500 hover:scale-105">
    <div class="relative h-32 sm:h-48 md:h-56 bg-gradient-to-br from-green-700 to-green-900 dark:from-green-800 dark:to-green-950">
      <img class="absolute inset-0 w-full h-full object-cover opacity-30" src="https://picsum.photos/600/350?random=1" alt="Background foliage">
      <div class="absolute inset-0 flex items-center justify-center">
        <img class="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover transform translate-y-8 sm:translate-y-12 md:translate-y-16" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile picture">
      </div>
    </div>
    <div class="pt-12 pb-6 px-6 sm:pt-16 sm:pb-8 sm:px-8 text-center">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mb-2">Jane Doe</h2>
      <p class="text-md sm:text-lg text-green-700 dark:text-green-400 font-semibold mb-4">Real Estate Agent</p>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed mb-6">
        Dedicated real estate professional specializing in sustainable properties and luxury homes in the Green Valley area. Passionate about helping clients find their perfect home.
      </p>
      <div class="flex justify-center space-x-4 mb-6">
        <a href="#" class="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1">
          View Listings
        </a>
        <a href="#" class="bg-transparent border border-green-600 dark:border-green-500 text-green-600 dark:text-green-500 hover:bg-green-50 dark:hover:bg-gray-700 font-semibold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
          Contact
        </a>
      </div>
      <div class="grid grid-cols-2 gap-4 text-xs sm:text-sm text-gray-700 dark:text-gray-300">
        <div class="flex items-center justify-center p-2 rounded-md bg-gray-50 dark:bg-gray-700">
          <span class="font-medium text-gray-900 dark:text-white mr-1">150+</span> Properties Sold
        </div>
        <div class="flex items-center justify-center p-2 rounded-md bg-gray-50 dark:bg-gray-700">
          <span class="font-medium text-gray-900 dark:text-white mr-1">12</span> Years Exp.
        </div>
      </div>
    </div>
  </div>
</div>

Composant Profils utilisateur

Un composant de profils d’utilisateur réactif et professionnel conçu pour les applications de crypto-monnaie/blockchain, doté d’un design épuré et fiable avec une palette de couleurs complémentaires et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto py-8">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-12 text-gray-900 dark:text-white leading-tight">
      Blockchain Innovators
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

      <!-- Profile Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="relative h-32 bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-800 dark:to-indigo-800">
          <img class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-md" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile Picture">
        </div>
        <div class="pt-16 pb-8 px-6 text-center">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">John Doe</h3>
          <p class="text-sm text-blue-600 dark:text-blue-400 mt-1">CEO, CryptoCorp</p>
          <p class="text-gray-600 dark:text-gray-400 mt-4 text-sm leading-relaxed">Visionary leader driving innovation in decentralized finance and blockchain solutions.</p>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.25c-.21.16-.48.24-.76.24a.8.8 0 01-.6-.24c-.33-.25-.53-.6-.53-1.01h0V10.1h-3A.7.7 0 012 9.4c0-.4.32-.7.7-.7h3.1V6.15c0-1.8 1.4-3.23 3.14-3.23.86 0 1.6.3 2.18.9l.06.06c.03.04.05.08.08.12.03.05.06.09.09.14l.03.05.02.03c.01.02.02.04.03.05.7-.7 1.8-1.12 3-1.12 2 0 3.6 1.62 3.6 3.6v1.3H21a.7.7 0 01.7.7c0 .4-.32.7-.7.7h-.9v7.8c0 .4-.35.7-.76.7h0a.8.8 0 01-.6-.24l-3.9-3c-.15-.12-.35-.18-.56-.18h-.12c-.2 0-.4.06-.55.18l-3.9 3zm-1.8-8.2c-.34 0-.63.2-.74.47-.07.16-.1.32-.1.49v6.5l3.5-2.7c.18-.14.4-.2.62-.2h.1c.22 0 .42.06.6.2l3.4 2.7V12.5a.7.7 0 01-.7-.7h-7a.7.7 0 01-.7-.7zM16.9 6.8c0-1.2-.9-2.1-2.1-2.1-.6 0-1.2.25-1.6.7-.4.4-.6.9-.6 1.6v1.7h4.3V6.8zM7.5 4.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v1.7H9.2V6.4c0-.5-.2-.9-.5-1.2-.3-.3-.7-.5-1.2-.5z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.417 2.865 8.163 6.833 9.488.5.092.682-.217.682-.483 0-.237-.008-.867-.013-1.702-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.46-1.11-1.46-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.64.354-1.088.649-1.339-2.22-.253-4.555-1.112-4.555-4.93 0-1.088.387-1.979 1.029-2.673-.103-.253-.446-1.268.099-2.64 0 0 .84-.268 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.026 2.747-1.026.546 1.372.202 2.387.099 2.64.642.694 1.029 1.585 1.029 2.673 0 3.827-2.339 4.673-4.566 4.92.359.309.678.92.678 1.855 0 1.339-.012 2.419-.012 2.747 0 .268.18.577.688.483C21.137 20.17 24 16.423 24 12.017 24 6.484 19.522 2 14 2h-2z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.25 6.75H3.75A1.75 1.75 0 002 8.5v7A1.75 1.75 0 003.75 17h16.5A1.75 1.75 0 0022 15.5v-7A1.75 1.75 0 0020.25 6.75zM8.5 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM11.25 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM14 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM16.75 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM20 9.5a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="relative h-32 bg-gradient-to-r from-teal-500 to-green-500 dark:from-teal-700 dark:to-green-700">
          <img class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-md" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Profile Picture">
        </div>
        <div class="pt-16 pb-8 px-6 text-center">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Jane Smith</h3>
          <p class="text-sm text-green-600 dark:text-green-400 mt-1">CTO, Decentralized Labs</p>
          <p class="text-gray-600 dark:text-gray-400 mt-4 text-sm leading-relaxed">Lead architect for secure and scalable smart contract development and dApps.</p>
          <div class="mt-6 flex justify-center space-x-4">
             <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.25c-.21.16-.48.24-.76.24a.8.8 0 01-.6-.24c-.33-.25-.53-.6-.53-1.01h0V10.1h-3A.7.7 0 012 9.4c0-.4.32-.7.7-.7h3.1V6.15c0-1.8 1.4-3.23 3.14-3.23.86 0 1.6.3 2.18.9l.06.06c.03.04.05.08.08.12.03.05.06.09.09.14l.03.05.02.03c.01.02.02.04.03.05.7-.7 1.8-1.12 3-1.12 2 0 3.6 1.62 3.6 3.6v1.3H21a.7.7 0 01.7.7c0 .4-.32.7-.7.7h-.9v7.8c0 .4-.35.7-.76.7h0a.8.8 0 01-.6-.24l-3.9-3c-.15-.12-.35-.18-.56-.18h-.12c-.2 0-.4.06-.55.18l-3.9 3zm-1.8-8.2c-.34 0-.63.2-.74.47-.07.16-.1.32-.1.49v6.5l3.5-2.7c.18-.14.4-.2.62-.2h.1c.22 0 .42.06.6.2l3.4 2.7V12.5a.7.7 0 01-.7-.7h-7a.7.7 0 01-.7-.7zM16.9 6.8c0-1.2-.9-2.1-2.1-2.1-.6 0-1.2.25-1.6.7-.4.4-.6.9-.6 1.6v1.7h4.3V6.8zM7.5 4.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v1.7H9.2V6.4c0-.5-.2-.9-.5-1.2-.3-.3-.7-.5-1.2-.5z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.417 2.865 8.163 6.833 9.488.5.092.682-.217.682-.483 0-.237-.008-.867-.013-1.702-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.46-1.11-1.46-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.64.354-1.088.649-1.339-2.22-.253-4.555-1.112-4.555-4.93 0-1.088.387-1.979 1.029-2.673-.103-.253-.446-1.268.099-2.64 0 0 .84-.268 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.026 2.747-1.026.546 1.372.202 2.387.099 2.64.642.694 1.029 1.585 1.029 2.673 0 3.827-2.339 4.673-4.566 4.92.359.309.678.92.678 1.855 0 1.339-.012 2.419-.012 2.747 0 .268.18.577.688.483C21.137 20.17 24 16.423 24 12.017 24 6.484 19.522 2 14 2h-2z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.25 6.75H3.75A1.75 1.75 0 002 8.5v7A1.75 1.75 0 003.75 17h16.5A1.75 1.75 0 0022 15.5v-7A1.75 1.75 0 0020.25 6.75zM8.5 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM11.25 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM14 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM16.75 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM20 9.5a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="relative h-32 bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700">
          <img class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-md" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Profile Picture">
        </div>
        <div class="pt-16 pb-8 px-6 text-center">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Michael Chen</h3>
          <p class="text-sm text-red-600 dark:text-red-400 mt-1">Head of Research, QuantumChain</p>
          <p class="text-gray-600 dark:text-gray-400 mt-4 text-sm leading-relaxed">Expert in cryptographic research and quantum-resistant blockchain technologies.</p>
          <div class="mt-6 flex justify-center space-x-4">
             <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.25c-.21.16-.48.24-.76.24a.8.8 0 01-.6-.24c-.33-.25-.53-.6-.53-1.01h0V10.1h-3A.7.7 0 012 9.4c0-.4.32-.7.7-.7h3.1V6.15c0-1.8 1.4-3.23 3.14-3.23.86 0 1.6.3 2.18.9l.06.06c.03.04.05.08.08.12.03.05.06.09.09.14l.03.05.02.03c.01.02.02.04.03.05.7-.7 1.8-1.12 3-1.12 2 0 3.6 1.62 3.6 3.6v1.3H21a.7.7 0 01.7.7c0 .4-.32.7-.7.7h-.9v7.8c0 .4-.35.7-.76.7h0a.8.8 0 01-.6-.24l-3.9-3c-.15-.12-.35-.18-.56-.18h-.12c-.2 0-.4.06-.55.18l-3.9 3zm-1.8-8.2c-.34 0-.63.2-.74.47-.07.16-.1.32-.1.49v6.5l3.5-2.7c.18-.14.4-.2.62-.2h.1c.22 0 .42.06.6.2l3.4 2.7V12.5a.7.7 0 01-.7-.7h-7a.7.7 0 01-.7-.7zM16.9 6.8c0-1.2-.9-2.1-2.1-2.1-.6 0-1.2.25-1.6.7-.4.4-.6.9-.6 1.6v1.7h4.3V6.8zM7.5 4.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v1.7H9.2V6.4c0-.5-.2-.9-.5-1.2-.3-.3-.7-.5-1.2-.5z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.417 2.865 8.163 6.833 9.488.5.092.682-.217.682-.483 0-.237-.008-.867-.013-1.702-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.46-1.11-1.46-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.64.354-1.088.649-1.339-2.22-.253-4.555-1.112-4.555-4.93 0-1.088.387-1.979 1.029-2.673-.103-.253-.446-1.268.099-2.64 0 0 .84-.268 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.026 2.747-1.026.546 1.372.202 2.387.099 2.64.642.694 1.029 1.585 1.029 2.673 0 3.827-2.339 4.673-4.566 4.92.359.309.678.92.678 1.855 0 1.339-.012 2.419-.012 2.747 0 .268.18.577.688.483C21.137 20.17 24 16.423 24 12.017 24 6.484 19.522 2 14 2h-2z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.25 6.75H3.75A1.75 1.75 0 002 8.5v7A1.75 1.75 0 003.75 17h16.5A1.75 1.75 0 0022 15.5v-7A1.75 1.75 0 0020.25 6.75zM8.5 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM11.25 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM14 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM16.75 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM20 9.5a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="relative h-32 bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-blue-700 dark:to-cyan-700">
          <img class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-md" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Profile Picture">
        </div>
        <div class="pt-16 pb-8 px-6 text-center">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Emily White</h3>
          <p class="text-sm text-cyan-600 dark:text-cyan-400 mt-1">Community Manager, Ethos Network</p>
          <p class="text-gray-600 dark:text-gray-400 mt-4 text-sm leading-relaxed">Engaging the blockchain community and fostering global adoption.</p>
          <div class="mt-6 flex justify-center space-x-4">
             <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.25c-.21.16-.48.24-.76.24a.8.8 0 01-.6-.24c-.33-.25-.53-.6-.53-1.01h0V10.1h-3A.7.7 0 012 9.4c0-.4.32-.7.7-.7h3.1V6.15c0-1.8 1.4-3.23 3.14-3.23.86 0 1.6.3 2.18.9l.06.06c.03.04.05.08.08.12.03.05.06.09.09.14l.03.05.02.03c.01.02.02.04.03.05.7-.7 1.8-1.12 3-1.12 2 0 3.6 1.62 3.6 3.6v1.3H21a.7.7 0 01.7.7c0 .4-.32.7-.7.7h-.9v7.8c0 .4-.35.7-.76.7h0a.8.8 0 01-.6-.24l-3.9-3c-.15-.12-.35-.18-.56-.18h-.12c-.2 0-.4.06-.55.18l-3.9 3zm-1.8-8.2c-.34 0-.63.2-.74.47-.07.16-.1.32-.1.49v6.5l3.5-2.7c.18-.14.4-.2.62-.2h.1c.22 0 .42.06.6.2l3.4 2.7V12.5a.7.7 0 01-.7-.7h-7a.7.7 0 01-.7-.7zM16.9 6.8c0-1.2-.9-2.1-2.1-2.1-.6 0-1.2.25-1.6.7-.4.4-.6.9-.6 1.6v1.7h4.3V6.8zM7.5 4.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v1.7H9.2V6.4c0-.5-.2-.9-.5-1.2-.3-.3-.7-.5-1.2-.5z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.417 2.865 8.163 6.833 9.488.5.092.682-.217.682-.483 0-.237-.008-.867-.013-1.702-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.46-1.11-1.46-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.64.354-1.088.649-1.339-2.22-.253-4.555-1.112-4.555-4.93 0-1.088.387-1.979 1.029-2.673-.103-.253-.446-1.268.099-2.64 0 0 .84-.268 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.026 2.747-1.026.546 1.372.202 2.387.099 2.64.642.694 1.029 1.585 1.029 2.673 0 3.827-2.339 4.673-4.566 4.92.359.309.678.92.678 1.855 0 1.339-.012 2.419-.012 2.747 0 .268.18.577.688.483C21.137 20.17 24 16.423 24 12.017 24 6.484 19.522 2 14 2h-2z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.25 6.75H3.75A1.75 1.75 0 002 8.5v7A1.75 1.75 0 003.75 17h16.5A1.75 1.75 0 0022 15.5v-7A1.75 1.75 0 0020.25 6.75zM8.5 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM11.25 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM14 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM16.75 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM20 9.5a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
            </a>
          </div>
        </div>
      </div>

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

Cyberpunk_User_Profiles_Component

Un composant complexe et réactif de profils d’utilisateurs avec une esthétique cyberpunk et une palette de couleurs chaudes de coucher de soleil, adapté aux sites Web de voyage/tourisme. Prend en charge le mode sombre, des accents néon et des éléments interactifs.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-900 text-orange-200 p-4 sm:p-8 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Left Column: User Profile -->
    <div class="md:col-span-1 bg-gradient-to-br from-indigo-900 to-purple-900 rounded-3xl shadow-xl border border-purple-700 transform hover:scale-105 transition-all duration-300 dark:from-purple-950 dark:to-gray-900">
      <div class="p-6 sm:p-8 text-center relative">
        <div class="absolute top-4 right-4 flex space-x-2">
          <span class="relative flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
          </span>
          <span class="text-xs font-mono text-orange-400">STATUS: ONLINE</span>
        </div>
        <img class="w-32 h-32 rounded-full mx-auto border-4 border-orange-500 shadow-lg glow-effect-orange mb-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        <h2 class="text-3xl font-bold text-orange-400 mb-2 font-mono">AURORA_SKYWALKER</h2>
        <p class="text-sm text-purple-300 mb-4">Cyber-Explorer | Data-Nomad | Pixel-Poet</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fas fa-envelope"></i></a>
          <a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fab fa-twitter"></i></a>
          <a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fab fa-instagram"></i></a>
        </div>
        <div class="text-left space-y-3">
          <div class="border-t border-purple-800 pt-4 flex items-center space-x-2">
            <i class="fas fa-map-marker-alt text-orange-500"></i>
            <span class="text-sm text-indigo-300">Location: Neo-Vegas Sector 7</span>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fas fa-calendar-alt text-orange-500"></i>
            <span class="text-sm text-indigo-300">Member Since: 2077.01.15</span>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fas fa-star text-orange-500"></i>
            <span class="text-sm text-indigo-300">Rating: 4.8 / 5.0 (2,104 reviews)</span>
          </div>
        </div>
        <button class="mt-8 px-6 py-3 bg-orange-600 text-white rounded-full text-lg font-bold uppercase tracking-wider shadow-lg transform hover:scale-105 hover:bg-orange-700 transition-all duration-300 glow-button-orange focus:outline-none focus:ring-4 focus:ring-orange-500 focus:ring-opacity-75">
          Edit Profile
        </button>
      </div>
    </div>

    <!-- Right Column: Stats & Activity -->
    <div class="md:col-span-2 space-y-8">
      <!-- Navigation Tabs -->
      <div class="bg-gradient-to-r from-red-800 to-orange-800 rounded-3xl p-2 shadow-xl border border-red-700 dark:from-red-950 dark:to-orange-900">
        <div class="flex flex-wrap justify-around text-sm sm:text-base font-bold font-mono">
          <a href="#" class="px-4 py-2 text-white glow-text-white-active rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105 active:bg-orange-900 active:ring-2 active:ring-orange-500">Dashboard</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Bookings</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Trips</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Reviews</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Settings</a>
        </div>
      </div>

      <!-- Stats Section -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-orange-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-plane-departure text-orange-400 text-3xl mb-3 glow-effect-orange-sm"></i>
          <p class="text-2xl font-bold font-mono text-orange-300">17</p>
          <p class="text-sm text-gray-400">Total Expeditions</p>
        </div>
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-purple-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-map-marked-alt text-purple-400 text-3xl mb-3 glow-effect-purple-sm"></i>
          <p class="text-2xl font-bold font-mono text-purple-300">5</p>
          <p class="text-sm text-gray-400">Planetary Zones</p>
        </div>
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-red-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-hourglass-half text-red-400 text-3xl mb-3 glow-effect-red-sm"></i>
          <p class="text-2xl font-bold font-mono text-red-300">234</p>
          <p class="text-sm text-gray-400">Hours Logged</p>
        </div>
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-green-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-users text-green-400 text-3xl mb-3 glow-effect-green-sm"></i>
          <p class="text-2xl font-bold font-mono text-green-300">12</p>
          <p class="text-sm text-gray-400">Travel Buddies</p>
        </div>
      </div>

      <!-- Recent Activity / Upcoming Bookings -->
      <div class="bg-gradient-to-br from-gray-800 to-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl border border-gray-700 dark:from-gray-900 dark:to-gray-900">
        <h3 class="text-2xl font-bold font-mono text-orange-400 mb-6 glow-text-orange">RECENT SYNAPSE LOGS</h3>
        <div class="space-y-6">
          <!-- Activity Item 1 -->
          <div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
            <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-orange-500 shadow-md glow-effect-orange-sm">
              <img src="https://picsum.photos/id/1040/80/80" alt="Destination" class="w-full h-full object-cover">
            </div>
            <div class="flex-grow ml-4">
              <p class="text-lg font-semibold text-orange-300 mb-1">Trip to Kepler-186f: Red Canopy Forests</p>
              <p class="text-sm text-gray-400">Departure: 2083.05.20 <span class="text-purple-400">//</span> Status: <span class="text-green-400">COMPLETED</span></p>
              <p class="text-xs text-gray-500">Booking ID: #KX93F-AX7</p>
            </div>
            <button class="ml-4 px-4 py-2 bg-purple-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-purple-700 transition-colors duration-200 glow-button-purple focus:outline-none focus:ring-2 focus:ring-purple-500">
              View Details
            </button>
          </div>
          <!-- Activity Item 2 -->
          <div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
            <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-purple-500 shadow-md glow-effect-purple-sm">
              <img src="https://picsum.photos/id/1043/80/80" alt="Destination" class="w-full h-full object-cover">
            </div>
            <div class="flex-grow ml-4">
              <p class="text-lg font-semibold text-purple-300 mb-1">Lunar Base Alpha: Gravity Chamber Training</p>
              <p class="text-sm text-gray-400">Departure: 2084.01.10 <span class="text-orange-400">//</span> Status: <span class="text-red-400">PENDING APPROVAL</span></p>
              <p class="text-xs text-gray-500">Booking ID: #LBX2C-Y-4</p>
            </div>
            <button class="ml-4 px-4 py-2 bg-orange-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-orange-700 transition-colors duration-200 glow-button-orange focus:outline-none focus:ring-2 focus:ring-orange-500">
              Modify Booking
            </button>
          </div>
          <!-- Activity Item 3 -->
          <div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
            <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-red-500 shadow-md glow-effect-red-sm">
              <img src="https://picsum.photos/id/1051/80/80" alt="Destination" class="w-full h-full object-cover">
            </div>
            <div class="flex-grow ml-4">
              <p class="text-lg font-semibold text-red-300 mb-1">Mars Colonization Project: Phase 3 Briefing</p>
              <p class="text-sm text-gray-400">Departure: 2085.03.15 <span class="text-indigo-400">//</span> Status: <span class="text-yellow-400">CONFIRMED</span></p>
              <p class="text-xs text-gray-500">Booking ID: #MCP7E-Z1</p>
            </div>
            <button class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-indigo-700 transition-colors duration-200 glow-button-indigo focus:outline-none focus:ring-2 focus:ring-indigo-500">
              View Itinerary
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Custom Glow Effects (using pseudo-elements or custom classes) -->
  <style>
    .glow-effect-orange {
      box-shadow: 0 0 15px rgba(255, 165, 0, 0.7), 0 0 30px rgba(255, 140, 0, 0.5);
    }
    .glow-effect-orange-sm {
      filter: drop-shadow(0 0 5px rgba(255, 165, 0, 0.6));
    }
    .glow-button-orange {
      box-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
    }
    .glow-button-orange:hover {
      box-shadow: 0 0 15px rgba(255, 165, 0, 0.9);
    }

    .glow-effect-purple-sm {
      filter: drop-shadow(0 0 5px rgba(128, 0, 128, 0.6));
    }
    .glow-button-purple {
      box-shadow: 0 0 8px rgba(128, 0, 128, 0.7);
    }
    .glow-button-purple:hover {
      box-shadow: 0 0 15px rgba(128, 0, 128, 0.9);
    }

    .glow-effect-red-sm {
      filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.6));
    }
    .glow-button-red {
      box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
    }

    .glow-button-indigo {
      box-shadow: 0 0 8px rgba(79, 70, 229, 0.7);
    }
    .glow-button-indigo:hover {
      box-shadow: 0 0 15px rgba(79, 70, 229, 0.9);
    }

    .glow-effect-green-sm {
      filter: drop-shadow(0 0 5px rgba(0, 128, 0, 0.6));
    }

    .glow-text-orange {
      text-shadow: 0 0 8px rgba(255, 165, 0, 0.8);
    }
    .glow-text-white-active {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    }
  </style>

  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>

Composant Profils utilisateur

Un composant de profil d’utilisateur simple et réactif avec un style aquarelle/artistique et une palette de couleurs arc-en-ciel dégradée, adapté aux plateformes de marché. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant Profils utilisateur

Il s’agit d’un composant complexe et réactif pour les sites Web d’actualités et de journalisme, doté d’un design inspiré du Bauhaus avec une palette de couleurs vives et sucrées et la prise en charge du mode sombre. Affiche plusieurs profils d’utilisateurs avec des photos de profil, des noms, des titres et le nombre d’abonnés, conçus pour une interface riche.

Ouvrir Aperçu

                <div class="font-sans bg-pink-100 text-purple-900 min-h-screen p-4 sm:p-8 dark:bg-purple-900 dark:text-pink-100 transition-colors duration-300">
  <div class="max-w-7xl mx-auto py-8 sm:py-12 lg:py-16">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-8 sm:mb-12 dark:text-pink-300 tracking-tight leading-tight uppercase relative">
      <span class="block">Our Esteemed Contributors</span>
      <span class="block text-2xl sm:text-3xl text-purple-600 dark:text-pink-200 mt-2 font-medium">Meet the Minds Behind the Stories</span>
      <div class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-2 bg-purple-500 dark:bg-pink-400 mt-4 rounded-full"></div>
    </h1>

    <p class="text-center text-lg sm:text-xl mb-12 sm:mb-16 max-w-3xl mx-auto dark:text-purple-200">
      Discover the talented individuals who bring you the latest news and in-depth analysis. Each profile offers a glimpse into their expertise and contributions.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-10">

      <!-- Profile Card 1 -->
      <article class="relative bg-gradient-to-br from-pink-300 to-red-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-indigo-600 dark:to-blue-800">
        <div class="absolute inset-0 bg-pink-400 opacity-20 dark:bg-blue-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile of Jane Doe">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Jane Doe</h2>
          <p class="text-lg text-pink-900 font-semibold mb-3 dark:text-purple-300">Senior Journalist</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">5.2K Followers</span>
          </div>
          <p class="text-sm text-pink-900 mb-6 line-clamp-3 dark:text-purple-200">Specializing in investigative journalism and political analysis. Jane has been breaking stories for over a decade...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-red-600 text-white font-bold rounded-full shadow-lg hover:bg-red-700 focus:outline-none focus:ring-4 focus:ring-red-300 transform hover:scale-105 transition-all duration-200 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-400">
            View Profile
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 2 -->
      <article class="relative bg-gradient-to-br from-blue-300 to-green-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-pink-600 dark:to-orange-800">
         <div class="absolute inset-0 bg-blue-400 opacity-20 dark:bg-orange-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Profile of John Smith">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">John Smith</h2>
          <p class="text-lg text-blue-900 font-semibold mb-3 dark:text-purple-300">Tech Editor</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">8.1K Followers</span>
          </div>
          <p class="text-sm text-blue-900 mb-6 line-clamp-3 dark:text-purple-200">Covering the latest in gadgets, software, and digital trends. John's insights are always cutting-edge...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-green-600 text-white font-bold rounded-full shadow-lg hover:bg-green-700 focus:outline-none focus:ring-4 focus:ring-green-300 transform hover:scale-105 transition-all duration-200 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-400">
            View Profile
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 3 -->
      <article class="relative bg-gradient-to-br from-yellow-300 to-orange-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-green-600 dark:to-teal-800">
         <div class="absolute inset-0 bg-yellow-400 opacity-20 dark:bg-teal-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile of Emily White">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Emily White</h2>
          <p class="text-lg text-orange-900 font-semibold mb-3 dark:text-purple-300">Culture Reporter</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">3.9K Followers</span>
          </div>
          <p class="text-sm text-orange-900 mb-6 line-clamp-3 dark:text-purple-200">Exploring arts, entertainment, and social trends. Emily brings a fresh perspective to cultural discourse...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-orange-600 text-white font-bold rounded-full shadow-lg hover:bg-orange-700 focus:outline-none focus:ring-4 focus:ring-orange-300 transform hover:scale-105 transition-all duration-200 dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-400">
            View Profile
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 4 -->
      <article class="relative bg-gradient-to-br from-purple-300 to-indigo-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-red-600 dark:to-yellow-800">
         <div class="absolute inset-0 bg-purple-400 opacity-20 dark:bg-yellow-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/33.jpg" alt="Profile of David Lee">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">David Lee</h2>
          <p class="text-lg text-indigo-900 font-semibold mb-3 dark:text-purple-300">Sports Analyst</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">6.7K Followers</span>
          </div>
          <p class="text-sm text-indigo-900 mb-6 line-clamp-3 dark:text-purple-200">Providing expert analysis on global sports events. David's predictions are a must-read for any fan...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white font-bold rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 transform hover:scale-105 transition-all duration-200 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-400">
            View Profile
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 5 -->
      <article class="relative bg-gradient-to-br from-teal-300 to-cyan-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-purple-600 dark:to-fuchsia-800">
         <div class="absolute inset-0 bg-teal-400 opacity-20 dark:bg-fuchsia-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/72.jpg" alt="Profile of Sarah Chen">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Sarah Chen</h2>
          <p class="text-lg text-cyan-900 font-semibold mb-3 dark:text-purple-300">Economics Correspondent</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">4.5K Followers</span>
          </div>
          <p class="text-sm text-cyan-900 mb-6 line-clamp-3 dark:text-purple-200">Reporting on global market trends and economic policies. Sarah's analysis clarifies complex financial news...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-cyan-600 text-white font-bold rounded-full shadow-lg hover:bg-cyan-700 focus:outline-none focus:ring-4 focus:ring-cyan-300 transform hover:scale-105 transition-all duration-200 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 dark:focus:ring-fuchsia-400">
            View Profile
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 6 -->
      <article class="relative bg-gradient-to-br from-lime-300 to-emerald-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-cyan-600 dark:to-lime-800">
         <div class="absolute inset-0 bg-lime-400 opacity-20 dark:bg-lime-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Profile of Mark Johnson">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Mark Johnson</h2>
          <p class="text-lg text-emerald-900 font-semibold mb-3 dark:text-purple-300">Science Editor</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">7.0K Followers</span>
          </div>
          <p class="text-sm text-emerald-900 mb-6 line-clamp-3 dark:text-purple-200">Breaking down complex scientific discoveries into understandable news. Mark's passion for science is infectious...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-emerald-600 text-white font-bold rounded-full shadow-lg hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-300 transform hover:scale-105 transition-all duration-200 dark:bg-lime-600 dark:hover:bg-lime-700 dark:focus:ring-lime-400">
            View Profile
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

    </div>

     <div class="flex justify-center mt-12 sm:mt-16">
        <button class="px-8 py-4 bg-purple-600 text-white text-xl font-bold rounded-full shadow-lg hover:bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 transition-all duration-300 transform hover:scale-105 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-400">
            Load More Contributors
        </button>
    </div>
  </div>
</div>