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>

관련 구성 요소

Follow Button 구성 요소

전자 상거래 애플리케이션에 적합한 보색 구성표를 사용하여 glassmorphism 효과로 설계된 복잡한 follow button 구성 요소로, 반응형 디자인과 어두운 테마 지원을 특징으로 합니다.

열다

Follow Button 구성 요소

유리 형태 스타일과 생생한 색상을 갖춘 복잡하고 반응이 빠른 팔로우 버튼 구성 요소로, Tailwind CSS를 사용하여 다크 모드를 지원하는 비즈니스 웹 사이트를 위해 설계되었습니다.

열다

사이버펑크 팔로우 버튼 구성 요소

CRM/비즈니스 도구를 위한 복잡한 사이버펑크 테마의 '팔로우' 버튼 구성 요소로, 포레스트/그린 색상 팔레트, 어두운 배경, 밝은 네온 액센트를 특징으로 하며 완전한 응답성과 다크 모드를 지원합니다.

열다