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

관련 구성 요소

사용자 프로필 구성 요소

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

열다

사용자 프로필 구성 요소

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

열다

사용자 프로필 구성 요소

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

열다