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>

관련 구성 요소

Brutalism 소셜 공유 버튼

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

열다

Social Share Buttons 구성 요소

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

열다

Social Share Buttons 구성 요소

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

열다