CCHub Logo CCHub Tailwind Collection
Componenti Profili utente Componente Profili utente

Componente Profili utente

Un componente dei profili utente per siti web agricoli/agricoli, caratterizzato da uno stile di design industriale con colori tenui, avatar utente, ruoli e informazioni sulla posizione. È reattivo e supporta la modalità oscura.

Anteprima

Codice HTML 

<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-8 sm:mb-12 text-center">
      Our Team in the Field
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Profile Card 1 -->
      <div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
          Farmer
        </div>
        <div class="flex flex-col items-center text-center">
          <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/men/75.jpg" alt="John Doe">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Lead Agronomist</p>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Specializing in crop rotation and soil health management for sustainable agriculture.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
            <svg class="w-4 h-4 mr-1" 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.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
            <span class="font-medium">Midwest Region, USA</span>
          </div>
          <a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
            View Profile
          </a>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
          Analyst
        </div>
        <div class="flex flex-col items-center text-center">
          <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/women/62.jpg" alt="Jane Smith">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Jane Smith</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Data Scientist</p>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Leveraging satellite imagery and AI for optimal crop yield predictions and resource allocation.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
            <svg class="w-4 h-4 mr-1" 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.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
            <span class="font-medium">Southern Europe</span>
          </div>
          <a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
            View Profile
          </a>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
          Engineer
        </div>
        <div class="flex flex-col items-center text-center">
          <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Peter Brown">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Peter Brown</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Farm Robotics Engineer</p>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Designing and deploying autonomous farm machinery to enhance efficiency and reduce labor costs.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
            <svg class="w-4 h-4 mr-1" 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.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
            <span class="font-medium">Northern Plains, Canada</span>
          </div>
          <a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
            View Profile
          </a>
        </div>
      </div>

      <!-- Profile Card 4 -->
      <div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
          Researcher
        </div>
        <div class="flex flex-col items-center text-center">
          <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Sarah Lee">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Sarah Lee</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Livestock Specialist</p>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Focused on animal welfare, nutrition, and sustainable pasture management for livestock farming.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
            <svg class="w-4 h-4 mr-1" 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.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
            <span class="font-medium">Australia Farmlands</span>
          </div>
          <a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
            View Profile
          </a>
        </div>
      </div>

      <!-- Profile Card 5 -->
      <div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
          Manager
        </div>
        <div class="flex flex-col items-center text-center">
          <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="David Green">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">David Green</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Operations Manager</p>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Overseeing day-to-day farm operations, logistics, and supply chain management for efficiency.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
            <svg class="w-4 h-4 mr-1" 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.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
            <span class="font-medium">South America</span>
          </div>
          <a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
            View Profile
          </a>
        </div>
      </div>

      <!-- Profile Card 6 -->
      <div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
          Specialist
        </div>
        <div class="flex flex-col items-center text-center">
          <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/women/17.jpg" alt="Emily White">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Emily White</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Farm Sustainability Advisor</p>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Guiding farms towards eco-friendly practices, carbon neutrality, and biodiversity preservation.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
            <svg class="w-4 h-4 mr-1" 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.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
            <span class="font-medium">Pacific Northwest, USA</span>
          </div>
          <a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
            View Profile
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Componenti correlati

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.

Aperto

Componente Profili utente

Un complesso componente del profilo utente ispirato al 3D progettato per i sistemi di prenotazione, con neutri freddi, reattività e supporto per la modalità scura.

Aperto

Scheda profilo utente neumorfico - Pastello

Una scheda profilo utente semplice e reattiva con un design neumorfico a tema pastello, adatta per i portfolio, incluso il supporto della modalità scura.

Aperto