Social Share Buttons 구성 요소
Tailwind CSS로 디자인된 미니멀한 소셜 공유 버튼 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.
HTML 코드
<div class="flex justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5 rounded-full">
<span>Facebook</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5 rounded-full">
<span>Twitter</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5 rounded-full">
<span>LinkedIn</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://picsum.photos/20/20?random=4" alt="Share on WhatsApp" class="w-5 h-5 rounded-full">
<span>WhatsApp</span>
</a>
</div>
<style>
@media (prefers-color-scheme: dark) {
.dark\:bg-gray-800 {
background-color: #2d3748;
}
.dark\:text-white {
color: #fff;
}
.dark\:hover\:bg-gray-700 {
background-color: #4a5568;
}
}
</style>관련 구성 요소
스큐어모픽 어스 톤 소셜 공유 버튼
어스 톤을 사용한 스큐어모픽 디자인으로 스타일링된 소셜 공유 버튼 세트입니다. 기능에는 순전히 HTML 및 Tailwind CSS 클래스로 구축된 호버 시 대화형 누름 효과를 통한 반응형 레이아웃 및 다크 모드 지원이 포함됩니다.
Social Share Buttons 구성 요소
블로그 콘텐츠 소비를 위해 회색조의 스큐어모픽 스타일로 설계된 반응형 소셜 공유 버튼 구성 요소입니다. 다크 모드 지원이 포함됩니다.