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>

관련 구성 요소

소셜 공유 버튼 구성 요소 51

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

열다

Social Share Buttons 구성 요소

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

열다

Neumorphic Social Share Buttons - 직업/경력 테마

부드러운 뉴모픽 스타일과 경쾌한 캔디 색상으로 디자인된 소셜 공유 버튼 세트로, 구인 게시판이나 커리어 플랫폼에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징입니다.

열다