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

Social Share Buttons 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-col items-center bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This Article</h2>
    <div class="flex space-x-4 mb-6">
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Facebook</a>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Twitter</a>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">LinkedIn</a>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=4" alt="Email" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Email</a>
        </div>
    </div>
    <p class="text-gray-600 dark:text-gray-400 text-center text-sm">Share this with your friends and family!</p>
</div>

관련 구성 요소

Social Share Buttons 구성 요소

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

열다

Social Share Buttons 구성 요소

레트로/빈티지 디자인, 어스 톤 색 구성표, 단순 복잡성 수준 및 어두운 테마를 지원하는 반응형 디자인이 있는 소셜 공유 버튼 구성 요소, Tailwind CSS를 사용하는 소셜 미디어 목적.

열다

Social Share Buttons 구성 요소

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

열다