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

Social Share Buttons 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 rounded-lg shadow-lg">
    <h2 class="text-white text-2xl font-bold mb-4">Share Your Experience</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="facebook" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="twitter" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="instagram" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="linkedin" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">LinkedIn</span>
        </a>
    </div>
    <div class="mt-5">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
    </div>
</div>

관련 구성 요소

Social Share Buttons 구성 요소

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

열다

Social Share Buttons 구성 요소

다크 모드 UI를 위한 소셜 공유 버튼 구성 요소는 포트폴리오 목적, 어두운 테마를 지원하는 반응형 디자인을 위해 Tailwind CSS, 회색조 색 구성표, 단순한 복잡성을 사용합니다.

열다

스큐어모픽 어스 톤 소셜 공유 버튼

어스 톤을 사용한 스큐어모픽 디자인으로 스타일링된 소셜 공유 버튼 세트입니다. 기능에는 순전히 HTML 및 Tailwind CSS 클래스로 구축된 호버 시 대화형 누름 효과를 통한 반응형 레이아웃 및 다크 모드 지원이 포함됩니다.

열다