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 구성 요소

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

열다

Glassmorphism 팔로우 버튼

Tailwind CSS를 사용하는 Glassmorphism 디자인, 다크 모드 지원의 반응형 팔로우 버튼.

열다

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

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

열다