Follow Button 구성 요소
브루탈리즘 스타일로 디자인된 팔로우 버튼 구성 요소는 높은 대비와 생생하고 대담한 외관을 가지고 있습니다. 반응형이며 어두운 테마를 지원합니다.
HTML 코드
<div class="flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<img class="mb-4 rounded-full border-4 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" width="100" height="100">
<h2 class="text-2xl font-bold text-black dark:text-white mb-2">Follow Us</h2>
<p class="text-gray-700 dark:text-gray-300 text-center mb-4">Join our community and stay updated with our latest content!</p>
<a href="#" class="px-4 py-2 text-lg font-bold text-white bg-black dark:bg-white dark:text-black border-4 border-black dark:border-white hover:bg-gray-600 dark:hover:bg-gray-300 transition-all duration-300">Follow</a>
</div>관련 구성 요소
Follow Button 구성 요소
사탕/달콤한 색 구성표가 있는 반응형 '팔로우' 버튼 구성 요소로, 구인 게시판 및 경력 플랫폼용으로 설계되었으며 다크 모드를 지원합니다.
Follow Button 구성 요소
이벤트 및 컨퍼런스 웹 사이트에 적합한 반응형 팔로우/언팔로우 버튼 구성 요소로, 그라디언트 전환, 다크 모드 지원 및 밝은 강조 색상을 특징으로 합니다. 여기에는 미묘한 호버 효과가 포함되어 있으며 클릭 시 텍스트와 배경이 변경됩니다(시뮬레이션됨).