검색 구성 요소

카테고리

구성 요소 사용자 프로필

사용자 프로필

사용자 정보 및 활동 표시

사용자 프로필 구성 요소 - Luxury Sepia

세피아/갈색 톤의 복잡한 럭셔리 테마 사용자 프로필 구성 요소로, 블로그/콘텐츠 사이트에 최적화되어 있습니다. 우아한 타이포그래피, 반응형 디자인, 다크 모드 지원이 특징입니다.

                <div class="bg-stone-50 dark:bg-stone-900 min-h-screen p-4 sm:p-6 md:p-8 font-serif text-stone-800 dark:text-stone-200 transition-colors duration-300">

  <!-- Component Header -->
  <div class="text-center mb-12">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-stone-900 dark:text-stone-50 mb-4 tracking-tight leading-tight">
      Our Esteemed Contributors
    </h1>
    <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 max-w-3xl mx-auto opacity-90">
      Discover the brilliant minds behind our captivating content. Each profile reflects their unique expertise and passion.
    </p>
  </div>

  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-12">

    <!-- User Profile Card 1 -->
    <div class="bg-white dark:bg-stone-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-stone-200 dark:border-stone-700 relative">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-50 dark:from-stone-800 via-stone-100 dark:via-stone-700 to-stone-200 dark:to-stone-600 opacity-60 dark:opacity-40 rounded-2xl"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex flex-col items-center text-center mb-6">
          <img class="w-32 h-32 rounded-full object-cover border-4 border-stone-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Johnson Profile">
          <h2 class="text-3xl font-bold mt-4 text-stone-900 dark:text-stone-100">Alice Johnson</h2>
          <p class="text-base text-stone-600 dark:text-stone-400 italic">Senior Editor & Historian</p>
        </div>

        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 border-dotted border-b border-stone-300 dark:border-stone-600 pb-6">
          Alice is a passionate historian specializing in ancient civilizations. Her articles bring the past to life with meticulous research and compelling narratives. She holds a Ph.D. in Archaeology from Oxford University.
        </p>

        <div class="grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Articles Published:</p>
            <span class="text-xl font-bold text-stone-900 dark:text-stone-100">78</span>
          </div>
          <div class="text-right">
            <p class="font-semibold text-stone-800 dark:text-stone-200 text-right">Joined:</p>
            <span class="text-xl font-bold text-stone-900 dark:text-stone-100">2018</span>
          </div>
        </div>

        <div class="mb-6">
          <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200 mb-2">Featured Work:</h3>
          <div class="flex space-x-3 overflow-x-auto pb-2 scrollbar-hide">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1018/120/80" alt="Article 1">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1025/120/80" alt="Article 2">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1033/120/80" alt="Article 3">
          </div>
        </div>

        <div class="flex justify-around mt-6 pt-6 border-t border-dotted border-stone-300 dark:border-stone-600">
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 9a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm-.195 2.5a.5.5 0 00-.81.65l3.25 4.5a.5.5 0 00.81-.65L4.805 11.5zM15 11a1 1 0 100 2h1a1 1 0 100-2h-1zm-3.342-6.6a1 1 0 00-1.316 0L5.38 8.167A1 1 0 006.18 9.833L9 6.556l2.82 3.277a1 1 0 001.62-.833L10.658 4.4z"></path></svg>
            <span class="hidden sm:inline">View Articles</span>
          </a>
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"></path><path d="M15 7v2a4 4 0 01-4 4H9.586l-1.828 1.828A4 4 0 0012.004 20h4.002A2 2 0 0018 18V9a2 2 0 00-2-2h-1z"></path></svg>
            <span class="hidden sm:inline">Contact</span>
          </a>
        </div>
      </div>
    </div>

    <!-- User Profile Card 2 -->
    <div class="bg-white dark:bg-stone-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-stone-200 dark:border-stone-700 relative">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-50 dark:from-stone-800 via-stone-100 dark:via-stone-700 to-stone-200 dark:to-stone-600 opacity-60 dark:opacity-40 rounded-2xl"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex flex-col items-center text-center mb-6">
          <img class="w-32 h-32 rounded-full object-cover border-4 border-stone-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300" src="https://randomuser.me/api/portraits/men/77.jpg" alt="David Lee Profile">
          <h2 class="text-3xl font-bold mt-4 text-stone-900 dark:text-stone-100">David Lee</h2>
          <p class="text-base text-stone-600 dark:text-stone-400 italic">Science & Technology Writer</p>
        </div>

        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 border-dotted border-b border-stone-300 dark:border-stone-600 pb-6">
          David is an award-winning science journalist with a gift for making complex topics accessible. His work explores breakthroughs in AI, space exploration, and sustainable technologies. He holds an M.S. in Physics.
        </p>

        <div class="grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Articles Published:</p>
            <span class="text-xl font-bold text-stone-900 dark:text-stone-100">62</span>
          </div>
          <div class="text-right">
            <p class="font-semibold text-stone-800 dark:text-stone-200 text-right">Joined:</p>
            <span class="text-xl font-bold text-stone-900 dark:text-stone-100">2019</span>
          </div>
        </div>

        <div class="mb-6">
          <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200 mb-2">Featured Work:</h3>
          <div class="flex space-x-3 overflow-x-auto pb-2 scrollbar-hide">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1041/120/80" alt="Article 4">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1043/120/80" alt="Article 5">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1044/120/80" alt="Article 6">
          </div>
        </div>

        <div class="flex justify-around mt-6 pt-6 border-t border-dotted border-stone-300 dark:border-stone-600">
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 9a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm-.195 2.5a.5.5 0 00-.81.65l3.25 4.5a.5.5 0 00.81-.65L4.805 11.5zM15 11a1 1 0 100 2h1a1 1 0 100-2h-1zm-3.342-6.6a1 1 0 00-1.316 0L5.38 8.167A1 1 0 006.18 9.833L9 6.556l2.82 3.277a1 1 0 001.62-.833L10.658 4.4z"></path></svg>
            <span class="hidden sm:inline">View Articles</span>
          </a>
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"></path><path d="M15 7v2a4 4 0 01-4 4H9.586l-1.828 1.828A4 4 0 0012.004 20h4.002A2 2 0 0018 18V9a2 2 0 00-2-2h-1z"></path></svg>
            <span class="hidden sm:inline">Contact</span>
          </a>
        </div>
      </div>
    </div>

    <!-- User Profile Card 3 -->
    <div class="bg-white dark:bg-stone-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-stone-200 dark:border-stone-700 relative">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-50 dark:from-stone-800 via-stone-100 dark:via-stone-700 to-stone-200 dark:to-stone-600 opacity-60 dark:opacity-40 rounded-2xl"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex flex-col items-center text-center mb-6">
          <img class="w-32 h-32 rounded-full object-cover border-4 border-stone-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300" src="https://randomuser.me/api/portraits/women/66.jpg" alt="Sophia Kim Profile">
          <h2 class="text-3xl font-bold mt-4 text-stone-900 dark:text-stone-100">Sophia Kim</h2>
          <p class="text-base text-stone-600 dark:text-stone-400 italic">Lifestyle & Travel Blogger</p>
        </div>

        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 border-dotted border-b border-stone-300 dark:border-stone-600 pb-6">
          Sophia captures the essence of global cultures and sustainable living. Her inspiring tales and stunning photography transport readers to vibrant destinations. She is a recognized voice in ethical travel.
        </p>

        <div class="grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Articles Published:</p>
            <span class="text-xl font-bold text-stone-900 dark:text-stone-100">91</span>
          </div>
          <div class="text-right">
            <p class="font-semibold text-stone-800 dark:text-stone-200 text-right">Joined:</p>
            <span class="text-xl font-bold text-stone-900 dark:text-stone-100">2017</span>
          </div>
        </div>

        <div class="mb-6">
          <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200 mb-2">Featured Work:</h3>
          <div class="flex space-x-3 overflow-x-auto pb-2 scrollbar-hide">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1050/120/80" alt="Article 7">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1052/120/80" alt="Article 8">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1057/120/80" alt="Article 9">
          </div>
        </div>

        <div class="flex justify-around mt-6 pt-6 border-t border-dotted border-stone-300 dark:border-stone-600">
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 9a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm-.195 2.5a.5.5 0 00-.81.65l3.25 4.5a.5.5 0 00.81-.65L4.805 11.5zM15 11a1 1 0 100 2h1a1 1 0 100-2h-1zm-3.342-6.6a1 1 0 00-1.316 0L5.38 8.167A1 1 0 006.18 9.833L9 6.556l2.82 3.277a1 1 0 001.62-.833L10.658 4.4z"></path></svg>
            <span class="hidden sm:inline">View Articles</span>
          </a>
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"></path><path d="M15 7v2a4 4 0 01-4 4H9.586l-1.828 1.828A4 4 0 0012.004 20h4.002A2 2 0 0018 18V9a2 2 0 00-2-2h-1z"></path></svg>
            <span class="hidden sm:inline">Contact</span>
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
/* Hide scrollbar for featured work on Webkit browsers */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
</style>

사용자 프로필 구성 요소

3D 디자인, 미적 감각 및 흙색 구성표를 갖춘 반응형 사용자 프로필 구성 요소로, 여행 및 관광 웹 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">

  <div class="max-w-4xl w-full mx-auto grid md:grid-cols-2 gap-6 lg:gap-8">

    <!-- User Profile Card 1 -->
    <div class="relative bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-750 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group p-6 sm:p-8 overflow-hidden">
      <!-- Overlay for 3D effect -->
      <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(10px); perspective: 1000px;"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-32 h-32 md:w-36 md:h-36 rounded-full overflow-hidden border-4 border-stone-400 dark:border-stone-600 shadow-lg mb-4 group-hover:scale-105 transition-transform duration-300">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Isabella Rossi" class="w-full h-full object-cover">
        </div>
        <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-100 mt-2 mb-2 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">Isabella Rossi</h2>
        <p class="text-md sm:text-lg text-stone-600 dark:text-stone-300 font-medium mb-4 italic">"The world is a book, and those who do not travel read only one page."</p>

        <div class="w-full grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">12</span>
            <span class="text-sm">Trips Taken</span>
          </div>
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">23</span>
            <span class="text-sm">Reviews</span>
          </div>
        </div>

        <p class="text-sm text-stone-600 dark:text-stone-400 mb-6 max-w-sm">
          Passionate globetrotter with a love for sustainable travel and exploring hidden gems. Specializes in cultural immersions.
        </p>

        <div class="flex flex-wrap justify-center gap-3">
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full bg-amber-700 hover:bg-amber-800 dark:bg-amber-500 dark:hover:bg-amber-600 text-white text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Send Message
          </a>
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full border border-amber-700 dark:border-amber-500 text-amber-700 dark:text-amber-500 dark:hover:text-white hover:bg-amber-700 dark:hover:bg-amber-500 text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-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 0118.91 10.37M6.343 7.273v10.184h10.184"></path></svg>
            View Profile
          </a>
        </div>
      </div>
    </div>

    <!-- User Profile Card 2 -->
    <div class="relative bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-750 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group p-6 sm:p-8 overflow-hidden">
      <!-- Overlay for 3D effect -->
      <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(10px); perspective: 1000px;"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-32 h-32 md:w-36 md:h-36 rounded-full overflow-hidden border-4 border-stone-400 dark:border-stone-600 shadow-lg mb-4 group-hover:scale-105 transition-transform duration-300">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Ethan Miller" class="w-full h-full object-cover">
        </div>
        <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-100 mt-2 mb-2 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">Ethan Miller</h2>
        <p class="text-md sm:text-lg text-stone-600 dark:text-stone-300 font-medium mb-4 italic">"Blessed are the curious for they shall have adventures."</p>

        <div class="w-full grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">9</span>
            <span class="text-sm">Trips Taken</span>
          </div>
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">18</span>
            <span class="text-sm">Reviews</span>
          </div>
        </div>

        <p class="text-sm text-stone-600 dark:text-stone-400 mb-6 max-w-sm">
          Adventure seeker and nature enthusiast always looking for the next hiking trail or mountain to conquer. Enjoys wilderness expeditions.
        </p>

        <div class="flex flex-wrap justify-center gap-3">
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full bg-amber-700 hover:bg-amber-800 dark:bg-amber-500 dark:hover:bg-amber-600 text-white text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Send Message
          </a>
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full border border-amber-700 dark:border-amber-500 text-amber-700 dark:text-amber-500 dark:hover:text-white hover:bg-amber-700 dark:hover:bg-amber-500 text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-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 0118.91 10.37M6.343 7.273v10.184h10.184"></path></svg>
            View Profile
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

사용자 프로필 구성 요소

음식/레스토랑 웹사이트용으로 설계된 복잡하고 반응이 빠른 사용자 프로필 구성 요소로, 고대비 색상의 다크 모드 UI를 특징으로 합니다. 프로필 정보와 클릭 유도문안이 포함된 여러 사용자 카드가 포함되어 있습니다.

열다 미리 보기

                <div class="bg-gray-950 min-h-screen text-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-zinc-950">
  <div class="container mx-auto max-w-7xl">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-white mb-8 sm:mb-12 text-center">
      Our Featured Foodies
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      
      <!-- User Profile Card 1 -->
      <div class="bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:bg-zinc-900">
        <div class="relative h-48 sm:h-56 bg-gradient-to-r from-purple-700 to-indigo-700 dark:from-purple-900 dark:to-indigo-900">
          <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=1" alt="User food background">
          <div class="absolute inset-0 bg-black/60 flex items-center justify-center">
            <img class="w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-yellow-400 object-cover shadow-lg" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture">
          </div>
        </div>
        <div class="p-6 sm:p-8 text-center">
          <h3 class="text-3xl font-bold text-yellow-400 mt-4 mb-2">Sarah L.</h3>
          <p class="text-gray-300 text-lg sm:text-xl mb-4">Food Blogger & Recipe Creator</p>
          <div class="flex justify-center flex-wrap gap-2 sm:gap-3 mb-6">
            <span class="bg-purple-800 text-purple-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-purple-700">Vegan Enthusiast</span>
            <span class="bg-blue-800 text-blue-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-blue-700">Dessert Lover</span>
            <span class="bg-emerald-800 text-emerald-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-emerald-700">Home Cook</span>
          </div>
          <p class="text-gray-400 leading-relaxed mb-6 line-clamp-3">"Passionate about plant-based cuisine, I love experimenting with fresh ingredients to create delicious and healthy meals from scratch. My kitchen is my happy place!"</p>
          <a href="#" class="inline-block bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-yellow-400 hover:scale-105 shadow-lg text-lg">
            View Recipes
          </a>
        </div>
      </div>

      <!-- User Profile Card 2 -->
      <div class="bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:bg-zinc-900">
        <div class="relative h-48 sm:h-56 bg-gradient-to-r from-red-700 to-orange-700 dark:from-red-900 dark:to-orange-900">
          <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=2" alt="User food background">
          <div class="absolute inset-0 bg-black/60 flex items-center justify-center">
            <img class="w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-yellow-400 object-cover shadow-lg" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile Picture">
          </div>
        </div>
        <div class="p-6 sm:p-8 text-center">
          <h3 class="text-3xl font-bold text-yellow-400 mt-4 mb-2">David M.</h3>
          <p class="text-gray-300 text-lg sm:text-xl mb-4">Restaurant Critic & Foodie</p>
          <div class="flex justify-center flex-wrap gap-2 sm:gap-3 mb-6">
            <span class="bg-purple-800 text-purple-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-purple-700">Fine Dining</span>
            <span class="bg-blue-800 text-blue-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-blue-700">Street Food</span>
            <span class="bg-emerald-800 text-emerald-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-emerald-700">Traveler</span>
          </div>
          <p class="text-gray-400 leading-relaxed mb-6 line-clamp-3">"I travel the world seeking unique culinary experiences, from Michelin-starred restaurants to hidden street food gems. Food is my passion and my adventure!"</p>
          <a href="#" class="inline-block bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-yellow-400 hover:scale-105 shadow-lg text-lg">
            Read Reviews
          </a>
        </div>
      </div>

      <!-- User Profile Card 3 -->
      <div class="bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:bg-zinc-900">
        <div class="relative h-48 sm:h-56 bg-gradient-to-r from-emerald-700 to-teal-700 dark:from-emerald-900 dark:to-teal-900">
          <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=3" alt="User food background">
          <div class="absolute inset-0 bg-black/60 flex items-center justify-center">
            <img class="w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-yellow-400 object-cover shadow-lg" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile Picture">
          </div>
        </div>
        <div class="p-6 sm:p-8 text-center">
          <h3 class="text-3xl font-bold text-yellow-400 mt-4 mb-2">Jessica P.</h3>
          <p class="text-gray-300 text-lg sm:text-xl mb-4">Baking Expert & Instructor</p>
          <div class="flex justify-center flex-wrap gap-2 sm:gap-3 mb-6">
            <span class="bg-purple-800 text-purple-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-purple-700">Pastries</span>
            <span class="bg-blue-800 text-blue-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-blue-700">Bread Making</span>
            <span class="bg-emerald-800 text-emerald-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-emerald-700">Gluten-Free</span>
          </div>
          <p class="text-gray-400 leading-relaxed mb-6 line-clamp-3">"There's nothing more satisfying than the smell of freshly baked goods. I love teaching others the joy of baking and sharing my sweetest creations!"</p>
          <a href="#" class="inline-block bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-yellow-400 hover:scale-105 shadow-lg text-lg">
            Explore Courses
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

사용자 프로필 구성 요소

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

열다 미리 보기

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl border border-blue-200 dark:border-blue-700 relative">
    <!-- Organic Top Curve -->
    <div class="absolute inset-x-0 top-0 h-24 bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-600 dark:to-blue-800 rounded-b-full transform scale-x-150 -translate-y-1/2 opacity-75"></div>

    <div class="relative pt-12 pb-6 px-6 text-center">
      <img class="w-24 h-24 rounded-full mx-auto mb-4 border-4 border-white dark:border-gray-800 shadow-md transform transition-transform duration-300 ease-in-out hover:scale-110" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Profile Avatar">
      
      <h3 class="text-xl font-semibold text-blue-900 dark:text-gray-100 mb-1">Jane Doe</h3>
      <p class="text-sm text-blue-600 dark:text-blue-300 mb-4">Verified Vendor</p>
      
      <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">
        Providing high-quality handcrafted goods to homes worldwide. Passionate about unique designs and customer satisfaction.
      </p>
      
      <div class="flex justify-center space-x-3 mb-6">
        <div class="flex items-center text-blue-700 dark:text-blue-400 text-sm">
          <svg class="w-4 h-4 mr-1 fill-current" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
          </svg>
          <span>120 Sales</span>
        </div>
        <div class="flex items-center text-blue-700 dark:text-blue-400 text-sm">
          <svg class="w-4 h-4 mr-1 fill-current" viewBox="0 0 20 20" fill="currentColor">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.517c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" />
          </svg>
          <span>4.9 (88 Reviews)</span>
        </div>
      </div>

      <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full transition duration-300 ease-in-out transform hover:-translate-y-0.5 shadow-md shadow-blue-300 dark:shadow-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        View Shop
      </a>
    </div>
  </div>
</div>

사용자 프로필 구성 요소

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

열다 미리 보기

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

사용자 프로필 구성 요소

소셜 미디어를 위한 반응형의 미니멀한 사용자 프로필 구성 요소로, 사용자 정보, 팔로우 버튼 및 다크 모드 지원이 포함된 여러 프로필을 제공합니다. 유사한 색 구성표를 사용합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-slate-900 dark:to-gray-900 min-h-screen font-sans">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center">
      Featured Profiles
    </h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

      <!-- Profile Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile picture of Jane Doe">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Jane Doe</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@janedo_e</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Passionate photographer exploring the world's hidden beauty through my lens. Sharing moments, one click at a time.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">1.2K</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">350</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">98</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile picture of John Smith">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">John Smith</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@johns_dev</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Frontend developer building engaging user experiences. Passionate about clean code and modern web technologies.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">870</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">210</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">65</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile picture of Sarah Lee">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Sarah Lee</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@sarah_art</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Digital artist and illustrator. Turning imagination into vivid colors and captivating visuals. Always learning, always creating.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">1.5K</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">400</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">120</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Profile picture of Mike Ross">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Mike Ross</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@mikero_ss</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Travel enthusiast documenting journeys across continents. Seeking adventure and sharing the beauty of different cultures.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">950</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">280</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">80</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Profile picture of Emily White">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Emily White</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@emily_reads</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Book lover and aspiring writer. Diving into new worlds, one page at a time. Sharing reviews and literary thoughts.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">720</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">190</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">55</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Profile picture of David Green">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">David Green</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@david_music</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Musician and composer. Creating melodies that tell stories. Exploring sounds from classical to electronic.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">1.1K</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">300</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">110</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

    </div>
  </div>
</div>

사용자 프로필 구성 요소

여행/관광 웹사이트용으로 설계된 단순하고 예술적인 사용자 프로필 구성 요소로, 부드러운 수채화 텍스처, 무지개 그라데이션 색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-gray-900 dark:to-slate-950 p-6 sm:p-10 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto overflow-hidden rounded-xl shadow-2xl relative bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 backdrop-filter backdrop-blur-sm">
    <!-- Artistic background layer -->
    <div class="absolute inset-0 bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-300 dark:from-pink-700 dark:via-purple-700 dark:to-indigo-700 opacity-60 dark:opacity-40 filter blur-xl animate-gradient-xy"></div>
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/water-color.png')] opacity-10 dark:opacity-5"></div>

    <div class="relative p-6 sm:p-8 text-center">
      <!-- Profile Image -->
      <div class="w-28 h-28 mx-auto -mt-4 mb-4 rounded-full overflow-hidden border-4 border-white dark:border-gray-700 shadow-lg transform transition-transform duration-300 hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture" class="w-full h-full object-cover">
      </div>

      <!-- User Name -->
      <h2 class="text-2xl sm:text-3xl font-extrabold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 dark:from-purple-400 dark:via-pink-400 dark:to-red-400">
        Elara Vance
      </h2>

      <!-- User Title/Location -->
      <p class="text-base sm:text-lg font-medium mb-4 text-gray-600 dark:text-gray-300">
        Wanderlust Explorer | Paris, France
      </p>

      <!-- Short Bio/Quote -->
      <p class="text-sm italic mb-6 text-gray-700 dark:text-gray-400 leading-relaxed">
        "Collecting moments, not things. Always seeking the next adventure."
      </p>

      <!-- Stats/Badges Placeholder (Optional for simple design) -->
      <div class="flex justify-center flex-wrap gap-3 mb-6">
        <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-blue-400 to-cyan-400 text-white shadow-md transition-all duration-300 hover:scale-105">50+ Trips</span>
        <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-green-400 to-lime-400 text-white shadow-md transition-all duration-300 hover:scale-105">Pro Photographer</span>
      </div>

      <!-- Call to Action / Button -->
      <button class="w-full py-3 px-6 rounded-full text-white font-bold text-lg 
                     bg-gradient-to-r from-teal-500 to-blue-600 
                     hover:from-teal-600 hover:to-blue-700 
                     dark:from-teal-600 dark:to-blue-700 
                     dark:hover:from-teal-700 dark:hover:to-blue-800 
                     shadow-lg transform transition-all duration-300 
                     hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-4 
                     focus:ring-blue-300 dark:focus:ring-blue-800">
        View Travel Journal
      </button>
    </div>
  </div>

  <style>
    @keyframes gradient-xy {
      0% {
        background-position: 0% 0%;
      }
      50% {
        background-position: 100% 100%;
      }
      100% {
        background-position: 0% 0%;
      }
    }

    .animate-gradient-xy {
      background-size: 400% 400%;
      animation: gradient-xy 15s ease infinite;
    }
  </style>
</div>

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

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

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="w-full max-w-sm rounded-[3rem] p-8 text-center transition-all duration-300 ease-in-out
    bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100
    shadow-[10px_10px_20px_#d1caca,-10px_-10px_20px_#ffffff]
    dark:from-gray-700 dark:via-gray-750 dark:to-gray-800
    dark:shadow-[10px_10px_20px_#222222,-10px_-10px_20px_#444444]">

    <div class="relative w-32 h-32 mx-auto mb-6 rounded-full
      shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
      dark:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
      <img class="w-full h-full object-cover rounded-full p-1 border-4 border-transparent
        shadow-[0px_0px_0px_2px_#ffffff,0px_0px_0px_4px_#ddcce1]
        dark:shadow-[0px_0px_0px_2px_#333,0px_0px_0px_4px_#555]"
        src="https://randomuser.me/api/portraits/women/14.jpg" alt="Profile Picture">
      <span class="absolute bottom-1 right-1 block w-4 h-4 rounded-full bg-green-400
        shadow-[0px_0px_0px_2px_#ffffff,0px_0px_0px_4px_#ddcce1]
        dark:shadow-[0px_0px_0px_2px_#333,0px_0px_0px_4px_#555]"></span>
    </div>

    <h2 class="text-2xl font-bold mb-2 text-purple-700 dark:text-purple-300">Jane Doe</h2>
    <p class="text-md text-pink-600 mb-6 dark:text-pink-300">Creative Designer & Developer</p>

    <div class="grid grid-cols-3 gap-4 mb-8">
      <div class="p-3 rounded-xl
        shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
        dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_#444444]">
        <p class="text-lg font-semibold text-rose-500 dark:text-rose-300">12</p>
        <p class="text-sm text-purple-500 dark:text-purple-200">Projects</p>
      </div>
      <div class="p-3 rounded-xl
        shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
        dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_#444444]">
        <p class="text-lg font-semibold text-rose-500 dark:text-rose-300">80</p>
        <p class="text-sm text-purple-500 dark:text-purple-200">Clients</p>
      </div>
      <div class="p-3 rounded-xl
        shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
        dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_444444]">
        <p class="text-lg font-semibold text-rose-500 dark:text-rose-300">5</p>
        <p class="text-sm text-purple-500 dark:text-purple-200">Awards</p>
      </div>
    </div>

    <div class="flex justify-center space-x-4">
      <button class="py-3 px-6 rounded-3xl font-semibold transition-all duration-300 ease-in-out
        bg-gradient-to-br from-purple-200 to-pink-200 text-purple-700
        shadow-[7px_7px_14px_#b9a8bd,-7px_-7px_14px_#ffffff]
        hover:shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
        dark:from-gray-600 dark:to-gray-700 dark:text-purple-300
        dark:shadow-[7px_7px_14px_#222222,-7px_-7px_14px_#444444]
        dark:hover:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
        View Portfolio
      </button>
      <button class="py-3 px-6 rounded-3xl font-semibold transition-all duration-300 ease-in-out
        bg-gradient-to-br from-pink-200 to-rose-200 text-pink-700
        shadow-[7px_7px_14px_#b9a8bd,-7px_-7px_14px_#ffffff]
        hover:shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
        dark:from-gray-700 dark:to-gray-600 dark:text-pink-300
        dark:shadow-[7px_7px_14px_#222222,-7px_-7px_14px_#444444]
        dark:hover:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
        Contact Me
      </button>
    </div>
  </div>
</div>

뉴모픽 사용자 프로필 카드

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

열다 미리 보기

                <div class="p-4 sm:p-6 bg-stone-100 dark:bg-stone-800 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-sm mx-auto p-6 rounded-3xl
    bg-stone-200 shadow-custom-light
    dark:bg-stone-700 dark:shadow-custom-dark
    transition-all duration-300 ease-in-out
    border border-stone-300 dark:border-stone-600">

    <div class="flex flex-col items-center text-center">
      <div class="relative mb-6">
        <img class="w-32 h-32 rounded-full object-cover
          shadow-custom-light-inset dark:shadow-custom-dark-inset
          border-4 border-stone-200 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar">
      </div>

      <h2 class="text-2xl font-semibold text-stone-700 dark:text-stone-200 mb-2
        transition-colors duration-300">John Doe</h2>
      <p class="text-md text-stone-500 dark:text-stone-400 mb-4
        transition-colors duration-300">Software Engineer</p>

      <div class="w-full mb-6">
        <button class="w-full py-3 px-6 rounded-xl
          bg-stone-300 text-stone-700 font-medium
          shadow-custom-light-button
          hover:shadow-custom-light-button-hover
          active:shadow-custom-light-button-pressed
          dark:bg-stone-600 dark:text-stone-200
          dark:shadow-custom-dark-button
          dark:hover:shadow-custom-dark-button-hover
          dark:active:shadow-custom-dark-button-pressed
          transition-all duration-200 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50
          text-base sm:text-lg">
          View Profile
        </button>
      </div>

      <div class="flex justify-center space-x-4 w-full">
        <button class="p-3 rounded-xl
          text-stone-600 dark:text-stone-300
          bg-stone-300 shadow-custom-light-button
          hover:shadow-custom-light-button-hover
          active:shadow-custom-light-button-pressed
          dark:bg-stone-600 dark:shadow-custom-dark-button
          dark:hover:shadow-custom-dark-button-hover
          dark:active:shadow-custom-dark-button-pressed
          transition-all duration-200 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
          <span class="sr-only">Email</span>
        </button>

        <button class="p-3 rounded-xl
          text-stone-600 dark:text-stone-300
          bg-stone-300 shadow-custom-light-button
          hover:shadow-custom-light-button-hover
          active:shadow-custom-light-button-pressed
          dark:bg-stone-600 dark:shadow-custom-dark-button
          dark:hover:shadow-custom-dark-button-hover
          dark:active:shadow-custom-dark-button-pressed
          transition-all duration-200 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
          <span class="sr-only">Portfolio</span>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Custom Styles for Neumorphism - Add this to your main CSS file or a <style> tag if not using PostCSS for custom utilities -->
<style>
  .shadow-custom-light {
    box-shadow: 7px 7px 14px #b8b8b8, -7px -7px 14px #ffffff;
  }
  .dark .shadow-custom-dark {
    box-shadow: 7px 7px 14px #3d3b38, -7px -7px 14px #575550;
  }

  .shadow-custom-light-inset {
    box-shadow: inset 5px 5px 10px #b8b8b8, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-custom-dark-inset {
    box-shadow: inset 5px 5px 10px #3d3b38, inset -5px -5px 10px #575550;
  }

  /* Buttons */
  .shadow-custom-light-button {
    box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
  }
  .hover\:shadow-custom-light-button-hover:hover {
    box-shadow: 3px 3px 6px #b8b8b8, -3px -3px 6px #ffffff;
  }
  .active\:shadow-custom-light-button-pressed:active {
    box-shadow: inset 3px 3px 6px #b8b8b8, inset -3px -3px 6px #ffffff;
  }

  .dark .shadow-custom-dark-button {
    box-shadow: 5px 5px 10px #3d3b38, -5px -5px 10px #575550;
  }
  .dark .hover\:shadow-custom-dark-button-hover:hover {
    box-shadow: 3px 3px 6px #3d3b38, -3px -3px 6px #575550;
  }
  .dark .active\:shadow-custom-dark-button-pressed:active {
    box-shadow: inset 3px 3px 6px #3d3b38, inset -3px -3px 6px #575550;
  }
</style>

사용자 프로필 구성 요소

Tailwind CSS로 구축된 다크 모드 파스텔 테마가 있는 대시보드용 반응형 사용자 프로필 구성 요소입니다. 사용자 아바타, 이름, 역할 및 간단한 설명이 팔로우 버튼과 함께 표시됩니다. 디자인은 다양한 화면 크기에 맞게 조정되고 시스템 기본 설정에 따라 다크 모드를 지원합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-900 p-4 dark:bg-gray-900">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- User Profile Card 1 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
            <div class="flex flex-col items-center">
                <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                <h2 class="text-xl font-semibold text-purple-300 dark:text-purple-300">John Doe</h2>
                <p class="text-blue-300 dark:text-blue-300">Software Engineer</p>
                <p class="text-gray-400 text-center mt-2 dark:text-gray-400">Passionate about clean code and scalable architectures.</p>
                <button class="mt-4 px-6 py-2 rounded-full bg-purple-600 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700">Follow</button>
            </div>
        </div>

        <!-- User Profile Card 2 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
            <div class="flex flex-col items-center">
                <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
                <h2 class="text-xl font-semibold text-green-300 dark:text-green-300">Jane Smith</h2>
                <p class="text-teal-300 dark:text-teal-300">UI/UX Designer</p>
                <p class="text-gray-400 text-center mt-2 dark:text-gray-400">Creating intuitive and beautiful user experiences.</p>
                <button class="mt-4 px-6 py-2 rounded-full bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 dark:bg-green-600 dark:hover:bg-green-700">Follow</button>
            </div>
        </div>

        <!-- User Profile Card 3 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
            <div class="flex flex-col items-center">
                <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
                <h2 class="text-xl font-semibold text-blue-300 dark:text-blue-300">Peter Jones</h2>
                <p class="text-cyan-300 dark:text-cyan-300">Data Scientist</p>
                <p class="text-gray-400 text-center mt-2 dark:text-gray-400">Uncovering insights from complex datasets.</p>
                <button class="mt-4 px-6 py-2 rounded-full bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700">Follow</button>
            </div>
        </div>

        <!-- User Profile Card 4 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
            <div class="flex flex-col items-center">
                <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar">
                <h2 class="text-xl font-semibold text-yellow-300 dark:text-yellow-300">Sarah Brown</h2>
                <p class="text-orange-300 dark:text-orange-300">Product Manager</p>
                <p class="text-gray-400 text-center mt-2 dark:text-gray-400">Bringing innovative products to life.</p>
                <button class="mt-4 px-6 py-2 rounded-full bg-yellow-600 text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50 dark:bg-yellow-600 dark:hover:bg-yellow-700">Follow</button>
            </div>
        </div>

        <!-- User Profile Card 5 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
            <div class="flex flex-col items-center">
                <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
                <h2 class="text-xl font-semibold text-red-300 dark:text-red-300">Michael Green</h2>
                <p class="text-pink-300 dark:text-pink-300">DevOps Engineer</p>
                <p class="text-gray-400 text-center mt-2 dark:text-gray-400">Automating deployments and managing infrastructure.</p>
                <button class="mt-4 px-6 py-2 rounded-full bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 dark:bg-red-600 dark:hover:bg-red-700">Follow</button>
            </div>
        </div>

        <!-- User Profile Card 6 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
            <div class="flex flex-col items-center">
                <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
                <h2 class="text-xl font-semibold text-indigo-300 dark:text-indigo-300">Emily White</h2>
                <p class="text-violet-300 dark:text-violet-300">Marketing Specialist</p>
                <p class="text-gray-400 text-center mt-2 dark:text-gray-400">Crafting engaging campaigns and analyzing market trends.</p>
                <button class="mt-4 px-6 py-2 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 dark:bg-indigo-600 dark:hover:bg-indigo-700">Follow</button>
            </div>
        </div>

    </div>
</div>