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>관련 구성 요소
소셜 공유 버튼
반응형 소셜 공유 버튼 구성 요소는 어두운 테마 지원, 브루탈리즘 디자인, 유사한 색 구성표 및 복잡한 상호 작용을 제공하며 포트폴리오 웹 사이트를 위해 Tailwind CSS로 구축되었습니다.
Social Share Buttons 구성 요소
소셜 공유 버튼 마이크로 인터랙션, 그레이스케일 색 구성표, 소셜 미디어 인터페이스를 위한 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인이 있는 구성 요소입니다.