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>

관련 구성 요소

스큐어모픽 소셜 공유 버튼

Tailwind CSS를 사용하여 스큐어모픽 디자인으로 스타일링된 소셜 공유 버튼 세트입니다. 그라데이션, 그림자 및 호버/활성 효과를 제공하여 물리적 버튼을 시뮬레이션합니다. 구성 요소는 반응형이며 CSS를 통한 다크 모드 지원을 포함합니다. Facebook, Twitter, LinkedIn 및 일반 링크 복사 버튼에 대한 버튼이 포함되어 있습니다.

열다

Brutalism 소셜 공유 버튼

Brutalism 스타일, 반응형 효과 및 어두운 테마 지원을 제공하는 소셜 공유 버튼 구성 요소, 자바스크립트 필요 없음

열다

Social Share Buttons 구성 요소

단색 색 구성표가 있는 레트로/빈티지 소셜 공유 버튼 구성 요소입니다. 포트폴리오에 적합한 어두운 테마를 지원하는 복잡하고 반응이 빠른 디자인입니다. JavaScript 없이 Tailwind CSS를 사용합니다.

열다