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

사용자 프로필 구성 요소

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

미리 보기

HTML 코드 

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

관련 구성 요소

사용자 프로필 구성 요소

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

열다

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

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

열다

Glassmorphism 사용자 프로필 구성 요소(단순)

glassmorphism 디자인 스타일, 파스텔 색 구성표 및 다크 모드를 지원하는 간단하고 반응이 빠른 사용자 프로필 구성 요소입니다. 엔터테인먼트/미디어 플랫폼에 이상적입니다.

열다