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

Social Share Buttons 구성 요소

대시보드용으로 설계된 미니멀한 소셜 공유 버튼 구성 요소로, 생생한 색 구성표와 반응형 디자인이 특징이며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Share this Dashboard</h2>
  <div class="flex space-x-2">
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 text-white hover:bg-red-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 text-white hover:bg-green-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-yellow-500 text-white hover:bg-yellow-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=4" alt="Share via Email" class="w-5 h-5" />
    </a>
  </div>
</div>

관련 구성 요소

Social Share Buttons 구성 요소

전자 상거래 웹 사이트를 위해 설계된 스큐어모픽 소셜 공유 버튼 구성 요소로, 회색조 색 구성표와 다크 모드 지원을 특징으로 합니다.

열다

Social Share Buttons 구성 요소

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

열다

Social Share Buttons 구성 요소

레트로/빈티지 디자인과 파스텔 색상 구성표로 스타일링된 반응형 소셜 공유 버튼 구성 요소로, 다크 모드를 지원하며 소셜 미디어 인터페이스에 적합합니다.

열다