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>

관련 구성 요소

소셜 공유 버튼 구성 요소 51

스큐어모픽 디자인 원칙에 따라 설계된 반응형 소셜 공유 버튼 구성 요소로, 실제 객체를 모방하고 어두운 테마를 지원하는 버튼이 특징입니다. 구성 요소는 Tailwind CSS를 사용하여 스타일이 지정되며 picsum.photos의 자리 표시자 이미지와 randomuser.me 의 아바타를 포함합니다.

열다

Social Share Buttons 구성 요소

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

열다

소셜 공유 버튼

반응형 소셜 공유 버튼 구성 요소는 어두운 테마 지원, 브루탈리즘 디자인, 유사한 색 구성표 및 복잡한 상호 작용을 제공하며 포트폴리오 웹 사이트를 위해 Tailwind CSS로 구축되었습니다.

열다