Componenti Profili utente Componente dei profili utente in scala di grigi Art Déco
Componente dei profili utente in scala di grigi Art Déco

Un componente di profili utente reattivo con un design geometrico in scala di grigi Art Déco, adatto per bacheche di lavoro o piattaforme di carriera, incluso il supporto della modalità scura.
Anteprima

Codice HTML

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

Componente Profili utente

Un componente dei profili utente progettato in stile Brutalismo utilizzando Tailwind CSS, con una combinazione di colori monocromatica e fornendo un'interfaccia per il social networking. Supporta la modalità oscura ed è reattivo.
Aperto
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.
Aperto
Componente Profili utente

Un componente del profilo utente reattivo con design del neumorfismo e supporto per la modalità scura.
Aperto