Follow Button 구성 요소
Tailwind CSS를 사용하여 다크 모드를 지원하는 머티리얼 디자인 스타일로 설계된 반응형 Follow Button 컴포넌트입니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg space-y-4">
<img src="https://picsum.photos/100" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500 shadow-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Software Developer</p>
<button class="flex items-center justify-center w-full px-4 py-2 font-semibold text-white bg-blue-600 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600">
<span>Follow</span>
</button>
</div>
</div>
관련 구성 요소
Follow Button 구성 요소
이벤트 및 컨퍼런스 웹 사이트에 적합한 반응형 팔로우/언팔로우 버튼 구성 요소로, 그라디언트 전환, 다크 모드 지원 및 밝은 강조 색상을 특징으로 합니다. 여기에는 미묘한 호버 효과가 포함되어 있으며 클릭 시 텍스트와 배경이 변경됩니다(시뮬레이션됨).
Follow Button 구성 요소
사탕/달콤한 색 구성표가 있는 반응형 '팔로우' 버튼 구성 요소로, 구인 게시판 및 경력 플랫폼용으로 설계되었으며 다크 모드를 지원합니다.