Follow Button 구성 요소
전자 상거래 애플리케이션에 적합한 보색 구성표를 사용하여 glassmorphism 효과로 설계된 복잡한 follow button 구성 요소로, 반응형 디자인과 어두운 테마 지원을 특징으로 합니다.
HTML 코드
<div class="flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white bg-opacity-30 backdrop-blur-lg border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-6 w-80">
<div class="flex flex-col items-center">
<img class="rounded-full w-16 h-16 mb-4" src="https://i.pravatar.cc/300" alt="User Avatar">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Follow Us</h2>
<p class="text-gray-600 dark:text-gray-300 text-center mb-4">Join our community and stay updated with the latest deals and offers!</p>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">
Follow
</button>
<div class="flex items-center justify-between mt-4 w-full">
<img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=1" alt="Image 1">
<img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=2" alt="Image 2">
<img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=3" alt="Image 3">
</div>
</div>
</div>
</div>
관련 구성 요소
Follow Button 구성 요소
게임 웹 사이트를 위한 종이/인쇄에서 영감을 받은 복잡한 팔로우 버튼 구성 요소로, 밝은 액센트 색상의 흑백 단색 디자인이 특징이며 응답성 및 다크 모드에 최적화되어 있습니다.
Follow Button 구성 요소
마이크로 인터랙션, 세피아/갈색 색 구성표, 반응형 디자인 및 다크 모드 지원을 갖춘 복잡한 '팔로우' 버튼 구성 요소로 블로그/콘텐츠 플랫폼에 적합합니다.