CCHub Logo CCHub Tailwind Collection
구성 요소 팔로우 버튼 Follow Button 구성 요소

Follow Button 구성 요소

깔끔하고 미니멀한 '팔로우' 버튼은 레트로/빈티지 색상 팔레트로 디자인되어 대시보드 또는 프로필 페이지에 적합합니다. 대화형 호버 상태와 다크 모드 지원을 특징으로 하며 스위스/국제 타이포그래피 원칙을 구현합니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto font-sans">
  <div class="flex flex-col items-center space-y-4">
    <img class="w-20 h-20 rounded-full object-cover border-2 border-indigo-400 dark:border-indigo-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    <div class="text-center">
      <p class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Jane Doe</p>
      <p class="text-sm text-zinc-600 dark:text-zinc-400">@janedoe_official</p>
    </div>
    <button class="px-6 py-2 rounded-full border-2 border-indigo-500 bg-indigo-400 text-white font-bold text-sm tracking-wide uppercase shadow-md
                   hover:bg-indigo-500 hover:border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
                   dark:bg-indigo-600 dark:border-indigo-700 dark:hover:bg-indigo-700 dark:focus:ring-offset-zinc-800
                   transition duration-300 ease-in-out">
      Follow
    </button>
  </div>
</div>

관련 구성 요소

Neumorphic Follow Button 컴포넌트

오션/블루 톤의 복잡한 인터랙티브 뉴모픽 팔로우 버튼 컴포넌트로, 소셜 미디어 인터페이스를 위해 설계되었습니다. 다크 모드 지원 및 반응형 디자인이 포함되어 있습니다.

열다

3D_Analogous_Simple_Follow_Button_Component

3D 미학과 유사한 색 구성표를 갖춘 간단하고 반응이 빠른 '팔로우' 버튼은 포트폴리오 사이트에 적합하며 밝은 모드와 어두운 모드를 지원합니다.

열다

Follow Button 구성 요소

사탕/달콤한 색 구성표가 있는 반응형 '팔로우' 버튼 구성 요소로, 구인 게시판 및 경력 플랫폼용으로 설계되었으며 다크 모드를 지원합니다.

열다