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

Social Share Buttons 구성 요소

비즈니스/기업 웹사이트용으로 설계된 Neumorphism 스타일의 소셜 공유 버튼 구성 요소로, 어스 톤을 사용하고 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="flex justify-center items-center p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-white dark:bg-gray-900 shadow-neumorphism hover:shadow-neumorphism-hover transition-shadow duration-300">
        <img src="https://picsum.photos/seed/facebook/40/40" alt="Facebook" class="w-full h-full rounded-full object-cover" />
    </a>
    <a href="#" class="flex items-center justify-center w-12 h-12 mx-4 rounded-full bg-white dark:bg-gray-900 shadow-neumorphism hover:shadow-neumorphism-hover transition-shadow duration-300">
        <img src="https://picsum.photos/seed/twitter/40/40" alt="Twitter" class="w-full h-full rounded-full object-cover" />
    </a>
    <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-white dark:bg-gray-900 shadow-neumorphism hover:shadow-neumorphism-hover transition-shadow duration-300">
        <img src="https://picsum.photos/seed/linkedin/40/40" alt="LinkedIn" class="w-full h-full rounded-full object-cover" />
    </a>
</div>

<style>
    .shadow-neumorphism {
        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.7);
    }
    .shadow-neumorphism-hover {
        box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3), -4px -4px 12px rgba(255, 255, 255, 0.5);
    }
</style>

관련 구성 요소

Social Share Buttons 구성 요소

소셜 공유 버튼 구성 요소에는 Brutalism 디자인, 생생한 색 구성표 및 전자 상거래를 위한 복잡한 복잡성 수준이 있으며 Tailwind CSS를 사용하여 반응형 디자인 및 어두운 테마를 지원합니다. 자바스크립트가 없습니다.

열다

Social Share Buttons 구성 요소

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

열다

Social Share Buttons 구성 요소

Tailwind CSS를 사용하여 Brutalism 스타일, 반응형 효과 및 어두운 테마를 지원하는 소셜 공유 버튼 구성 요소입니다.

열다