CCHub Logo CCHub Tailwind Collection
구성 요소 사용자 프로필 사용자 프로필 구성 요소

사용자 프로필 구성 요소

농업/농업 웹사이트를 위한 사용자 프로필 구성 요소로, 차분한 색상, 사용자 아바타, 역할 및 위치 정보가 있는 산업 디자인 스타일을 특징으로 합니다. 반응이 빠르고 다크 모드를 지원합니다.

미리 보기

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>

관련 구성 요소

뉴모픽 사용자 프로필 카드

대시보드에 적합한 어스 톤을 사용하는 뉴모픽 디자인 미학을 갖춘 간단하고 반응이 빠른 사용자 프로필 카드입니다. 다크 모드 지원이 포함됩니다.

열다

뉴모픽 사용자 프로필 카드 - Pastel

파스텔 테마의 뉴모픽 디자인이 적용된 단순하고 반응이 빠른 사용자 프로필 카드로, 다크 모드 지원을 포함한 포트폴리오에 적합합니다.

열다

사용자 프로필 구성 요소

마켓플레이스를 위한 간단하고 반응이 빠른 사용자 프로필 카드로, 기업용 블루 톤과 다크 모드를 지원하는 유기적/자연에서 영감을 받은 디자인이 특징입니다.

열다