Social Share Buttons 구성 요소
반응형 소셜 공유 버튼 구성 요소는 실제 세계를 모방한 스큐어모픽 디자인 스타일을 사용하며 어두운 테마를 지원합니다.
HTML 코드
<div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex flex-col items-center space-y-4">
<h2 class="text-lg font-bold">Share this Post</h2>
<div class="flex space-x-4">
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=3" alt="LinkedIn" class="rounded-full" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=4" alt="Instagram" class="rounded-full" />
</a>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
<p>Connect with us!</p>
</div>
</div>관련 구성 요소
스큐어모픽 어스 톤 소셜 공유 버튼
어스 톤을 사용한 스큐어모픽 디자인으로 스타일링된 소셜 공유 버튼 세트입니다. 기능에는 순전히 HTML 및 Tailwind CSS 클래스로 구축된 호버 시 대화형 누름 효과를 통한 반응형 레이아웃 및 다크 모드 지원이 포함됩니다.
Social Share Buttons 구성 요소
레트로/빈티지 디자인, 어스 톤 색 구성표, 단순 복잡성 수준 및 어두운 테마를 지원하는 반응형 디자인이 있는 소셜 공유 버튼 구성 요소, Tailwind CSS를 사용하는 소셜 미디어 목적.