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>관련 구성 요소
Social Share Buttons 구성 요소
소셜 공유 버튼 마이크로 인터랙션, 그레이스케일 색 구성표, 소셜 미디어 인터페이스를 위한 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인이 있는 구성 요소입니다.
소셜 공유 버튼
Neumorphism 스타일, 단색 색 구성표 및 비즈니스/기업 웹사이트를 위한 단순 복잡성을 갖춘 소셜 공유 버튼. Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 디자인. 뉴모픽 효과를 위해 미묘한 그림자를 사용합니다.