소셜 공유 버튼 구성 요소 51
스큐어모픽 디자인 원칙에 따라 설계된 반응형 소셜 공유 버튼 구성 요소로, 실제 객체를 모방하고 어두운 테마를 지원하는 버튼이 특징입니다. 구성 요소는 Tailwind CSS를 사용하여 스타일이 지정되며 picsum.photos의 자리 표시자 이미지와 randomuser.me 의 아바타를 포함합니다.
HTML 코드
<div class="flex justify-center items-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<div class="flex space-x-4">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40" alt="Share on Facebook" class="rounded-full shadow-md mb-2">
<a href="#" class="bg-blue-600 dark:bg-blue-800 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
Facebook
</a>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40" alt="Share on Twitter" class="rounded-full shadow-md mb-2">
<a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
Twitter
</a>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40" alt="Share on LinkedIn" class="rounded-full shadow-md mb-2">
<a href="#" class="bg-blue-700 dark:bg-blue-900 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
LinkedIn
</a>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40" alt="Share on Instagram" class="rounded-full shadow-md mb-2">
<a href="#" class="bg-pink-500 dark:bg-pink-700 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
Instagram
</a>
</div>
</div>
</div>관련 구성 요소
Social Share Buttons 구성 요소
다크 모드 UI를 위한 소셜 공유 버튼 구성 요소는 포트폴리오 목적, 어두운 테마를 지원하는 반응형 디자인을 위해 Tailwind CSS, 회색조 색 구성표, 단순한 복잡성을 사용합니다.
Social Share Buttons 구성 요소
금융/뱅킹 인터페이스를 위한 깔끔하고 미니멀한 소셜 공유 구성 요소로, 검은색, 흰색 및 액센트 색상을 특징으로 하며 완전한 응답성과 다크 모드를 지원합니다.