Componenti Profili utente Componente Profili utente

Componente Profili utente

Un componente di profili utente reattivo e professionale progettato per applicazioni di criptovaluta/blockchain, caratterizzato da un design pulito e affidabile con una combinazione di colori complementare e supporto per la modalità oscura.

Anteprima

Codice HTML

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

Componenti correlati

Componente Profili utente

Un componente di profili utente complesso e reattivo per siti Web di notizie/giornalismo, caratterizzato da un design ispirato al Bauhaus con una combinazione di colori vivaci caramelle/dolci e supporto per la modalità scura. Visualizza più profili utente con immagini del profilo, nomi, titoli e conteggi di follower, progettati per un'interfaccia ricca.

Aperto

Componente Profili utente

Un componente del profilo utente reattivo con microinterazioni, combinazione di colori in scala di grigi, layout complesso, supporto per la modalità oscura e immagini/avatar casuali.

Aperto

Componente Profili utente

Un componente di profili utente reattivo per organizzazioni senza scopo di lucro/di beneficenza, caratterizzato da un design lussuoso/premium con toni blu professionali, supporto per la modalità oscura e tipografia sofisticata.

Aperto