Social Share Buttons 구성 요소
Tailwind CSS로 디자인된 미니멀한 소셜 공유 버튼 구성 요소로, 반응형 레이아웃과 어두운 테마 지원을 제공합니다. 구성 요소에는 깔끔하고 단순한 디자인 요소와 함께 인기 있는 소셜 미디어 플랫폼에서 공유할 수 있는 버튼이 포함되어 있습니다.
HTML 코드
<div class="flex flex-col md:flex-row justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
<div class="flex items-center space-x-2">
<img src="https://picsum.photos/30" alt="Avatar" class="w-8 h-8 rounded-full" />
<span class="text-gray-800 dark:text-gray-200">Share with:</span>
</div>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/twitter-squared.png" alt="Twitter" class="w-6 h-6" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-600 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png" alt="LinkedIn" class="w-6 h-6" />
</a>
</div>관련 구성 요소
Social Share Buttons 구성 요소
비즈니스/기업 웹사이트용으로 설계된 Neumorphism 스타일의 소셜 공유 버튼 구성 요소로, 어스 톤을 사용하고 어두운 테마를 지원합니다.
Social Share Buttons 구성 요소
레트로/빈티지 디자인, 어스 톤 색 구성표, 단순 복잡성 수준 및 어두운 테마를 지원하는 반응형 디자인이 있는 소셜 공유 버튼 구성 요소, Tailwind CSS를 사용하는 소셜 미디어 목적.