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 스타일, 단색 색 구성표 및 비즈니스/기업 웹사이트를 위한 단순 복잡성을 갖춘 소셜 공유 버튼. Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 디자인. 뉴모픽 효과를 위해 미묘한 그림자를 사용합니다.
Social Share Buttons 구성 요소
반응형과 미니멀한 소셜 공유 버튼 구성 요소는 회색조 색 구성표를 사용하여 스위스/국제 타이포그래피 스타일로 디자인되었습니다. 구인 게시판이나 경력 개발 플랫폼에 적합하며 다양한 소셜 미디어 플랫폼에 대한 깨끗한 공유 옵션을 제공합니다.