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

사용자 프로필 구성 요소

glassmorphism 디자인 스타일을 특징으로 하는 반응형 사용자 프로필 구성 요소로, 어두운 테마를 지원하고 Tailwind CSS를 사용합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full">
    <div class="flex flex-col items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
      <ul class="mt-4 space-y-2 text-center">
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> New York, USA</li>
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> January 1, 1990</li>
      </ul>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full mt-6">
    <div class="flex flex-col items-center">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
      <p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
      <ul class="mt-4 space-y-2 text-center">
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> London, UK</li>
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> March 5, 1992</li>
      </ul>
    </div>
  </div>
</div>
<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

관련 구성 요소

사용자 프로필 구성 요소

마이크로 인터랙션, 그레이스케일 색 구성표, 복잡한 레이아웃, 다크 모드 지원 및 무작위 이미지/아바타를 포함하는 반응형 사용자 프로필 구성 요소입니다.

열다

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

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

열다

사용자 프로필 구성 요소

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

열다