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

Social Share Buttons 구성 요소

반응형 소셜 공유 버튼 구성 요소는 전자 상거래 사이트를 위한 단색 구성표가 있는 glassmorphism 스타일로 설계되었습니다. 젖빛 유리와 같은 반투명 요소가 특징이며, 소셜 미디어에서 공유할 수 있는 여러 대화형 버튼이 포함되어 있으며, Tailwind CSS를 사용하여 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg space-x-4">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/200/200" alt="Product Image" class="w-24 h-24 rounded-lg mb-2">
        <h2 class="text-lg text-gray-800 dark:text-gray-200">Share this product</h2>
    </div>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white hover:bg-blue-700 transition-all duration-300 shadow-lg dark:bg-blue-600 dark:hover:bg-blue-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 text-white hover:bg-blue-600 transition-all duration-300 shadow-lg dark:bg-blue-500 dark:hover:bg-blue-700">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/twitter.png" alt="Twitter" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-pink-500 text-white hover:bg-pink-700 transition-all duration-300 shadow-lg dark:bg-pink-600 dark:hover:bg-pink-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-red-500 text-white hover:bg-red-700 transition-all duration-300 shadow-lg dark:bg-red-600 dark:hover:bg-red-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/pinterest.png" alt="Pinterest" class="w-6 h-6">
        </a>
    </div>
</div>

관련 구성 요소

레트로 소셜 공유 버튼

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

열다

Social Share Buttons 구성 요소

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

열다

Social Share Buttons 구성 요소

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

열다