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

Follow Button 구성 요소

머티리얼 디자인 원칙에 따라 설계된 반응형 Follow Button Component로, Tailwind CSS를 사용하여 다크 모드와 맞춤형 스타일을 지원합니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-5 transition-shadow duration-300 hover:shadow-lg">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg mr-3">
      <div class="flex-1">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Me</h2>
        <p class="text-gray-600 dark:text-gray-400">Join my journey and stay updated!</p>
      </div>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Follow
      </button>
    </div>
  </div>
</div>

관련 구성 요소

마이크로 인터랙션을 통한 Follow Button

어두운 테마를 지원하고 마이크로 인터랙션을 제공하는 반응형 Follow Button 구성 요소로, Tailwind CSS를 사용하는 소셜 미디어 애플리케이션용으로 설계되었습니다. 단색 색 구성표와 복잡한 상호 작용 요소가 특징입니다.

열다

Follow Button 구성 요소

파스텔 색조와 다크 모드를 지원하는 데이트/소셜 플랫폼을 위해 설계된 간단하고 반응이 빠른 팔로우 버튼 구성 요소입니다.

열다

Follow Button 구성 요소

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

열다