구성 요소 팔로우 버튼 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 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 머티리얼 디자인 스타일로 설계된 반응형 Follow Button 컴포넌트입니다.

열다

Glassmorphism 팔로우 버튼

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

열다

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

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

열다