사용자 프로필

사용자 프로필 구성 요소

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>

사용자 프로필 구성 요소

사용자 프로필: Brutalism 디자인, 단색 색 구성표 및 소셜 미디어 목적을 위한 단순한 복잡성을 갖춘 구성 요소입니다.

미리보기 열기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-brutalism rounded-none overflow-hidden">
    <div class="p-6">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-3xl font-bold text-black dark:text-white uppercase">Profiles</h2>
        <svg class="w-8 h-8 text-black dark:text-white" 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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
      </div>
      
      <div class="space-y-6">
        <!-- Profile 1 -->
        <div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
          <img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-bold text-black dark:text-white uppercase">John Doe</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Online</p>
          </div>
        </div>

        <!-- Profile 2 -->
        <div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
          <img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-bold text-black dark:text-white uppercase">Jane Smith</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Offline</p>
          </div>
        </div>

        <!-- Profile 3 -->
        <div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
          <img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-bold text-black dark:text-white uppercase">Peter Jones</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Online</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .shadow-brutalism {
    box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutalism {
    box-shadow: 8px 8px 0px 0px rgba(255, 255, 255, 1);
  }
</style>

사용자 프로필 구성 요소

사용자 프로필 구성 요소는 파스텔 색 구성표와 중간 정도의 복잡성 기능이 있는 다크 모드 대시보드용으로 설계되었습니다.

미리보기 열기

                <div class="bg-gray-900 text-gray-300 p-6 rounded-lg shadow-lg space-y-6">
    <h2 class="text-2xl font-bold text-center">User Profiles</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- User Profile Card -->
        <div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-xl font-semibold text-center">John Doe</h3>
            <p class="text-center">Software Developer</p>
            <div class="mt-4 flex justify-between">
                <button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
            </div>
        </div>
        <!-- User Profile Card -->
        <div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-xl font-semibold text-center">Jane Smith</h3>
            <p class="text-center">Product Manager</p>
            <div class="mt-4 flex justify-between">
                <button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
            </div>
        </div>
        <!-- User Profile Card -->
        <div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-xl font-semibold text-center">Michael Johnson</h3>
            <p class="text-center">UX Designer</p>
            <div class="mt-4 flex justify-between">
                <button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
            </div>
        </div>
        <!-- Add more user profiles as needed -->
    </div>
</div>

사용자 프로필 구성 요소

트라이어딕 색 구성표가 있는 브루탈리즘 스타일로 디자인된 사용자 프로필 구성 요소로, 블로그/콘텐츠 소비에 적합한 적당한 복잡성과 어두운 테마를 지원하는 반응형 디자인을 특징으로 합니다.

미리보기 열기

                <div class="container mx-auto p-6">
    <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">User Profiles</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Profile 1 -->
        <div class="bg-yellow-300 dark:bg-yellow-800 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
            <p class="text-gray-700 dark:text-gray-200">Content Writer</p>
            <p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Passionate about writing and sharing knowledge."
            </p>
            <img src="https://picsum.photos/200/100" alt="Content Image" class="mt-4 rounded-lg shadow-md">
        </div>
        <!-- Profile 2 -->
        <div class="bg-blue-400 dark:bg-blue-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Jane Smith</h3>
            <p class="text-gray-700 dark:text-gray-200">Graphic Designer</p>
            <p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Creating visuals that tell a story."
            </p>
            <img src="https://picsum.photos/200/100?grayscale" alt="Content Image" class="mt-4 rounded-lg shadow-md">
        </div>
        <!-- Profile 3 -->
        <div class="bg-green-500 dark:bg-green-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Mike Brown</h3>
            <p class="text-gray-700 dark:text-gray-200">Web Developer</p>
            <p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Building interactive web experiences."
            </p>
            <img src="https://picsum.photos/200/100?blur" alt="Content Image" class="mt-4 rounded-lg shadow-md">
        </div>
    </div>
</div>

사용자 프로필 구성 요소

Tailwind CSS를 사용하여 Brutalism 스타일로 설계된 사용자 프로필 구성 요소로, 단색 색 구성표를 특징으로 하며 소셜 네트워킹을 위한 인터페이스를 제공합니다. 다크 모드를 지원하며 반응형입니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center bg-gray-900 p-6 rounded-lg shadow-lg dark:bg-gray-800">
    <h1 class="text-4xl text-white font-bold mb-4">User Profiles</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
            <img src="https://picsum.photos/200/300?random=1" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
            <div class="p-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                <h2 class="text-2xl text-white font-semibold text-center">John Doe</h2>
                <p class="text-gray-400 text-center mb-2">@johndoe</p>
                <p class="text-gray-300 text-center">Web Developer<br>Based in San Francisco</p>
                <button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
            </div>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
            <img src="https://picsum.photos/200/300?random=2" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
            <div class="p-4">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                <h2 class="text-2xl text-white font-semibold text-center">Jane Smith</h2>
                <p class="text-gray-400 text-center mb-2">@janesmith</p>
                <p class="text-gray-300 text-center">Graphic Designer<br>Based in New York</p>
                <button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
            </div>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
            <img src="https://picsum.photos/200/300?random=3" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
            <div class="p-4">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                <h2 class="text-2xl text-white font-semibold text-center">Alex Johnson</h2>
                <p class="text-gray-400 text-center mb-2">@alexjohnson</p>
                <p class="text-gray-300 text-center">Content Creator<br>Based in Austin</p>
                <button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
            </div>
        </div>
    </div>
</div>

사용자 프로필 구성 요소

Tailwind CSS를 사용하는 반응형 사용자 프로필 구성 요소로, 머티리얼 디자인의 영향과 단색 색 구성표가 있습니다. 다크 모드를 지원하고 사용자 정보, 통계 및 최근 활동을 표시합니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
    <div class="relative">
      <img class="w-full h-40 object-cover object-center" src="https://picsum.photos/seed/material/400/200" alt="Profile background">
      <div class="absolute inset-0 bg-blue-500 opacity-40"></div>
    </div>
    <div class="relative z-10 -mt-16 flex items-center justify-center">
      <img class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-800 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
    </div>
    <div class="text-center p-6">
      <h3 class="text-2xl font-semibold text-gray-800 dark:text-white">John Doe</h3>
      <p class="text-sm text-blue-600 dark:text-blue-400">@johndoe</p>
      <p class="mt-3 text-gray-600 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="flex justify-around border-t border-gray-200 dark:border-gray-700 py-4">
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">1.2K</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Followers</p>
      </div>
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">350</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Following</p>
      </div>
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">2.5K</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Likes</p>
      </div>
    </div>
     <div class="p-6 border-t border-gray-200 dark:border-gray-700">
      <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h4>
      <ul class="space-y-4">
        <li class="flex items-start">
          <div class="flex-shrink-0">
            <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Jane Smith</span> liked your post.</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
          </div>
        </li>
         <li class="flex items-start">
          <div class="flex-shrink-0">
            <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User avatar">
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Peter Jones</span> commented on your photo.</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">5 hours ago</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

사용자 프로필 구성 요소

마이크로 인터랙션을 통한 전자 상거래를 위한 간단하고 반응이 빠른 사용자 프로필 구성 요소로, 색 구성표, 다크 모드 지원 및 JavaScript 없음이 보완됩니다.

미리보기 열기

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block mx-auto sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
    <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="text-xl leading-5 font-medium text-gray-900 dark:text-white">John Doe</p>
      <p class="text-sm leading-5 text-gray-600 dark:text-gray-400">Customer since 2023</p>
      <button class="mt-4 px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150 dark:bg-blue-700 dark:hover:bg-blue-600">View Profile</button>
    </div>
  </div>
</div>

사용자 프로필 구성 요소

비즈니스 또는 기업 웹 사이트에 적합한 트라이어드 색 구성표를 사용한 마이크로 상호 작용을 특징으로 하는 간단하고 반응이 빠른 사용자 프로필 구성 요소입니다.

미리보기 열기

                <div class="max-w-sm mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
    <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/seed/profile/400/200" alt="Profile Background">
    <div class="flex items-center mt-4">
        <img class="w-16 h-16 rounded-full border-4 border-blue-500 dark:border-yellow-500" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
        <div class="ml-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
        </div>
    </div>
    <p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="mt-4 flex justify-between">
        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-400 transition-colors">View Profile</button>
        <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg dark:bg-gray-700 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">Message</button>
    </div>
</div>

사용자 프로필 구성 요소

Glassmorphism 단색 색 구성표와 단순 복잡성을 가진 사용자 프로필 구성 요소.

미리보기 열기

                
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
    <div class="px-6 py-8">
      <div class="flex justify-center">
        <img class="h-24 w-24 rounded-full border-4 border-gray-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar">
      </div>
      <div class="mt-4 text-center">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-300">Web Developer</p>
      </div>
      <div class="mt-6 flex justify-center space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.917 3.187 9.165 7.62 10.692.55.1 1.05-.25 1.05-.56V20.23c-3.03.65-3.676-1.44-3.676-1.44-.59-.15-1.21-.45-1.44-.66-.42-.36-.33-.04-.05-.03.33.03.53.27.53.27.2 1.52 1.25 1.05 1.55.8.04-.63.23-1.05.42-1.29-2-.23-4.1-.1-4.1-4.42 0-.98.35-1.86 1.02-2.5.1-.21-.45-1.25.1-2.62 0 0 .84-.27 2.75 1.02.8-.23 1.65-.34 2.5-.35.85.01 1.7.12 2.5.35 1.9-.29 2.75-1.02 2.75-1.02.56 1.37.1 2.41.1 2.62.67.64 1.02 1.52 1.02 2.5 0 4.33-2.07 4.71-4.11 4.42-.29.25-.58.48-.9.69-.23.16-.5.2-.82.1-.48-.15-1.05.5-1.05.5V22.11c0 .31.5.66 1.05.5C19.818 21.182 23 16.934 23 12.017 23 6.484 18.522 2 13 2h-1z" clip-rule="evenodd"></path>
          </svg>
        </a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path d="M8.29 20.251c7.5 0 11.675-6.253 11.675-11.675 0-.178 0-.35-.012-.523A8.134 8.134 0 0022 5.92a8.171 8.171 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.222 8.222 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

Neumorphism User Profiles 생생한 색상의 구성 요소

비즈니스/기업 웹사이트를 위한 생생한 색상의 Neumorphism 사용자 프로필 구성 요소, 어두운 테마를 지원하는 반응형 디자인.

미리보기 열기

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-10">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

    <!-- Profile Card 1 -->
    <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="flex flex-col items-center pb-10">
        <img class="w-24 h-24 mb-3 rounded-full shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Bonnie image"/>
        <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Bonnie Green</h5>
        <span class="text-sm text-gray-500 dark:text-gray-400">UI/UX Designer</span>
        <div class="flex mt-4 space-x-3 md:mt-6">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:ring-4 focus:outline-none focus:ring-indigo-300 dark:bg-indigo-500 dark:hover:bg-indigo-600 dark:focus:ring-indigo-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">View Profile</a>
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">Message</a>
        </div>
      </div>
    </div>

    <!-- Profile Card 2 -->
    <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="flex flex-col items-center pb-10">
        <img class="w-24 h-24 mb-3 rounded-full shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Bonnie image"/>
        <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Jese Leos</h5>
        <span class="text-sm text-gray-500 dark:text-gray-400">Marketing Specialist</span>
        <div class="flex mt-4 space-x-3 md:mt-6">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-pink-600 rounded-lg hover:bg-pink-700 focus:ring-4 focus-outline-none focus:ring-pink-300 dark:bg-pink-500 dark:hover:bg-pink-600 dark:focus:ring-pink-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">View Profile</a>
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:ring-4 focus-outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">Message</a>
        </div>
      </div>
    </div>

    <!-- Profile Card 3 -->
    <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="flex flex-col items-center pb-10">
        <img class="w-24 h-24 mb-3 rounded-full shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Bonnie image"/>
        <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Robert Gough</h5>
        <span class="text-sm text-gray-500 dark:text-gray-400">Software Engineer</span>
        <div class="flex mt-4 space-x-3 md:mt-6">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-green-600 rounded-lg hover:bg-green-700 focus:ring-4 focus-outline-none focus:ring-green-300 dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">View Profile</a>
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:ring-4 focus-outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">Message</a>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #666666;
}
</style>

카테고리