Composant Profils utilisateur

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