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

Social Share Buttons 구성 요소

레트로/빈티지 디자인과 파스텔 색상 구성표로 스타일링된 반응형 소셜 공유 버튼 구성 요소로, 다크 모드를 지원하며 소셜 미디어 인터페이스에 적합합니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-6">
    <h2 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This!</h2>
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
        <div class="bg-pink-200 dark:bg-pink-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://facebook.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Facebook</a>
        </div>
        <div class="bg-blue-200 dark:bg-blue-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=1" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://twitter.com" class="font-semibold text-gray-800 dark:text-gray-200">Tweet This</a>
        </div>
        <div class="bg-green-200 dark:bg-green-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=2" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://instagram.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Instagram</a>
        </div>
        <div class="bg-yellow-200 dark:bg-yellow-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=3" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://linkedin.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on LinkedIn</a>
        </div>
        <div class="bg-purple-200 dark:bg-purple-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=4" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://pinterest.com" class="font-semibold text-gray-800 dark:text-gray-200">Pin It</a>
        </div>
        <div class="bg-red-200 dark:bg-red-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=5" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://tumblr.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Tumblr</a>
        </div>
    </div>
</div>

관련 구성 요소

레트로 소셜 공유 버튼

레트로/빈티지 디자인, 반응형 효과 및 Tailwind CSS를 사용하는 어두운 테마 지원이 있는 소셜 공유 버튼 구성 요소, JavaScript가 필요하지 않습니다.

열다

Social Share Buttons 구성 요소

대시보드용으로 설계된 미니멀한 소셜 공유 버튼 구성 요소로, 생생한 색 구성표와 반응형 디자인이 특징이며 다크 모드를 지원합니다.

열다

Social Share Buttons 구성 요소

소셜 공유 버튼: Tailwind CSS를 사용하는 다크 모드의 전자 상거래를 위한 구성 요소입니다. 단순하고 반응이 빠르며 회색조입니다.

열다