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

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

부동산 플랫폼용으로 설계된 반응형 '팔로우' 버튼 구성 요소로, 기업용 파란색 색 구성표, 다크 모드 지원 및 미묘한 대화형 호버 효과를 특징으로 합니다.

열다

사이버펑크 팔로우 버튼 구성 요소

CRM/비즈니스 도구를 위한 복잡한 사이버펑크 테마의 '팔로우' 버튼 구성 요소로, 포레스트/그린 색상 팔레트, 어두운 배경, 밝은 네온 액센트를 특징으로 하며 완전한 응답성과 다크 모드를 지원합니다.

열다