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

Social Share Buttons 구성 요소

전자 상거래 웹 사이트를 위해 설계된 스큐어모픽 소셜 공유 버튼 구성 요소로, 회색조 색 구성표와 다크 모드 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="flex justify-center p-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=1" alt="Share on Facebook" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=2" alt="Share on Twitter" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=3" alt="Share on Instagram" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=4" alt="Share via Email" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share via Email</span>
        </a>
    </div>
</div>

관련 구성 요소

Social Share Buttons 구성 요소

80년대/90년대의 레트로/빈티지 미학으로 스타일링된 반응형 소셜 공유 버튼 구성 요소로, Tailwind CSS 및 자리 표시자 이미지를 사용하여 어두운 테마를 지원합니다.

열다

Social Share Buttons 구성 요소

게임 웹사이트를 위해 디자인된 재미있고 재미있는 소셜 공유 버튼 구성 요소로, 그라데이션 무지개 색 구성표, 둥근 요소 및 대화형 호버 효과를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

Social Share Buttons 구성 요소

뉴스 및 저널리즘 웹 사이트를 위해 설계된 우아하고 반응이 빠른 소셜 공유 버튼 구성 요소로, 고급스러운 숲/녹색 색상 팔레트와 다크 모드 지원을 특징으로 합니다. 여기에는 다양한 플랫폼에서 기사를 공유하기 위한 여러 대화형 요소가 포함되어 있습니다.

열다