CCHub Logo CCHub Tailwind Collection
구성 요소 소셜 공유 버튼 Social Share Buttons 구성 요소

Social Share Buttons 구성 요소

반응형 소셜 공유 버튼 구성 요소는 실제 세계를 모방한 스큐어모픽 디자인 스타일을 사용하며 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex flex-col items-center space-y-4">
    <h2 class="text-lg font-bold">Share this Post</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=3" alt="LinkedIn" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=4" alt="Instagram" class="rounded-full" />
        </a>
    </div>
    <div class="text-sm text-gray-600 dark:text-gray-400">
        <p>Connect with us!</p>
    </div>
</div>

관련 구성 요소

Social Share Buttons 구성 요소

Bauhaus에서 영감을 받은 스포츠/피트니스 애플리케이션을 위한 소셜 공유 버튼은 기하학적 형태와 블루 톤을 특징으로 합니다. 다크 모드 지원으로 반응형.

열다

Social Share Buttons 구성 요소

음식/레스토랑 웹사이트를 위한 반응형 소셜 공유 버튼 구성 요소로, 무지개 그라데이션, 호버링의 미세 상호 작용 및 완전한 다크 모드 지원을 제공합니다.

열다

Social Share Buttons 구성 요소

블로그 콘텐츠 소비를 위해 회색조의 스큐어모픽 스타일로 설계된 반응형 소셜 공유 버튼 구성 요소입니다. 다크 모드 지원이 포함됩니다.

열다