Social Share Buttons 구성 요소
음식/레스토랑 웹사이트를 위한 반응형 소셜 공유 버튼 구성 요소로, 무지개 그라데이션, 호버링의 미세 상호 작용 및 완전한 다크 모드 지원을 제공합니다.
HTML 코드
<div class="flex items-center justify-center p-4 min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 max-w-sm w-full transition-all duration-300 ease-in-out transform hover:scale-105">
<h2 class="text-2xl font-extrabold text-center mb-6 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-400 dark:via-yellow-400 dark:to-green-400">
Share This Delicious Food!
</h2>
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
<!-- Facebook Button -->
<a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
bg-gradient-to-r from-blue-600 to-blue-800 text-white
dark:from-blue-700 dark:to-blue-900">
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M17 2H7a5 5 0 00-5 5v10a5 5 0 005 5h10a5 5 0 005-5V7a5 5 0 00-5-5zm-1.8 7.2h-2.1v-1.7c0-.5.2-.8.8-.8h1.3V6.2h-2.1c-2.4 0-3 1.8-3 3v2.2H8.9v2.8h1.6V20h3.2v-5.8h1.6l.3-2.8h-1.9v-2c0-.7.3-1.1 1.2-1.1z" />
</svg>
<span class="sr-only">Share on Facebook</span>
</a>
<!-- Twitter Button -->
<a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
bg-gradient-to-r from-sky-400 to-cyan-600 text-white
dark:from-sky-500 dark:to-cyan-700">
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M18.24 3.7 C17.38 4.6 15.65 5.56 12.87 5.7 C11.3 4 9.17 3 6.78 3 c-3.57 0-6.49 2.92-6.49 6.5 S3.21 16 6.78 16 c1.79 0 3.44-.68 4.7-1.85 l.3 2.15 h-3.23 C5.06 16.3 3.6 17.76 3.6 19.5 s1.46 3.2 3.2 3.2 H14.6 c1.74 0 3.2-1.46 3.2-3.2 0-1.74-1.46-3.2-3.2-3.2 H11.4 L11 11.5 h5.2 c.72 0 1.28-.56 1.28-1.28 V8.4 c0-.72-.56-1.28-1.28-1.28 h-5.8 l-.5-1.95 C12.28 4.4 13.9 3.5 15.9 3.5 c1.18 0 2.27.35 3.16.94 L18.24 3.7 M6.78 5.7 c.73 0 1.4.16 2 .46 -.6-.26-1.28-.4-1.98-.4 c-3.13 0-5.69 2.56-5.69 5.7 S3.65 17 6.78 17 c1.36 0 2.6-.48 3.56-1.25 L9.6 14.8 c-.8 0-1.5-.16-2.1-.46 C6.7 14 6.2 13.7 5.8 13.2 l-.35-.35 c-.46-.46-1.07-.7-1.72-.7 -1.25 0-2.28 1.03-2.28 2.28 s1.03 2.28 2.28 2.28 c.83 0 1.58-.45 1.95-1.12 C6.2 15.9 6.5 15.6 6.78 15.6 L6.78 5.7 z" />
</svg>
<span class="sr-only">Share on Twitter</span>
</a>
<!-- WhatsApp Button -->
<a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
bg-gradient-to-r from-green-500 to-teal-500 text-white
dark:from-green-600 dark:to-teal-600">
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.04 2.2 C6.55 2.2 2.17 6.6 2.17 12.1 c0 1.7.45 3.3.13 4.1 L2 21.8 l5.1-.9 c.7.3 1.4.4 2.2.4 L12.04 22 c5.49 0 9.87-4.4 9.87-9.9 C21.91 6.6 17.53 2.2 12.04 2.2 M17 15.1 c-.2.1-.4.2-.6.2-.2 0-.4-.1-.5-.1-.2-.1-.5-.2-.7-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3s-.3-.2-.5-.3-.2-.1-.4-.2-.2-.1-.4-.2-.1-.1-.3-.2-.1-.1-.3-.1-.1-.1-.2-.1-.1-.1-.2-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1 0-.1 0-.1 0 0 0c-.1 0-.1 0 0 0-.1 0-.1 0 0 0h-.1s0-.1 0-.1c0-.1 0-.1 0-.1c-.1 0-.1 0-.1-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1 0-.1-.1-.2-.1s-.1-.1-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1 0c-.1 0-.1 0-.1 0l-.1 0c-.1 0-.1 0-.1 0l-.1 0c-.1 0-.1 0-.1 0l-.1-.1c-.1 0-.1 0-.1 0l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1 0c-.1 0-.1 0-.1-.1l-.1-.1C4.4 17.5 4 15.8 4 14.1c0-2.8.9-5.1 2.3-6.9 1.4-1.8 3.3-2.8 5.4-2.8S15.1 5.4 16.5 7.2c1.4 1.8 2.3 4.1 2.3 6.9 0 2.8-.9 5.1-2.3 6.9-1.4 1.8-3.3 2.8-5.4 2.8-2.1 0-4.1-.9-5.4-2.8l-.1-.1-.1-.1-.2-.1-.2-.1-.2-.1-.2-.1-.2-.1.2-.2.2-.2c-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3s-.3-.2-.5-.3-.2-.1-.4-.2-.2-.1-.4-.2-.2-.1-.4-.2-.1-.1-.3-.1-.1-.1-.3-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1 0-.1 0-.1 0-.1-.1c-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1-.1-.2-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0V11.2c0-.5.2-.8.5-.8h.1c.3.1.5.3.6.5.1.2.2.3.4.5.1.2.3.4.4.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5h.1c-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3l-3.2-1.9c-.3-.2-.5-.3-.7-.4-.3-.1-.5-.2-.8-.3-.2-.1-.5-.2-.7-.3l-1.3-.8c-.1-.1-.3-.2-.4-.2-.2-.1-.4-.1-.6-.2-.2-.1-.4-.2-.6-.2-.2 0-.3-.1-.5-.1-.2-.1-.4-.1-.6-.1-.2 0-.4 0-.5-.1-.2-.1-.3-.1-.5-.1-.2 0-.4 0-.5-.1-.2-.1-.3-.1-.5-.1-.2 0-.4-.1-.5-.1C7.1 11 6.9 11 6.8 11.2c-.1.2-.1.4-.1.6s.1.4.2.6l1.3 2.2c.2.3.4.6.6.9.2.3.4.5.6.8.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.2.3.5.5.7.1.3.3.5.4.8.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.2.3.5.5.7.1.3.3.5.4.8.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9q.2-.3.4-.6c.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9v-.1c.1-.1.2-.3.3-.4l-.2-.3c.1-.1.2-.2.3-.3.1-.1.3-.2.4-.2.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3s.3-.2.5-.3a5.5 a5.5 0 00-.7-.4c-.2-.1-.4-.2-.5-.3z" />
</svg>
<span class="sr-only">Share on WhatsApp</span>
</a>
<!-- Email Button -->
<a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
bg-gradient-to-r from-orange-400 to-red-500 text-white
dark:from-orange-500 dark:to-red-600">
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M2.01 4.2 C1 4.8 1 5 1 5 c0 .6.2 1.2.6 1.6 l7.8 7.8 C10.1 16.5 11.2 17 12.5 17 s2.4-.5 3.5-.6 l.1-1.1 -.1-.1 c-.1-.1-.2-.2-.2-.2 C15.4 15.3 14 14.2 13 13 L6.7 6.7 c-.5-.5-.8-.7-1.3-.8 C4.9 5.8 4.6 5.8 4.2 5.8 c-.4 0-.8.1-1.2.2 C2.5 6 2.3 6.1 2.1 6.1 L2.1 4.2 M21.9 4.2 C20.9 4.8 20.9 5 20.9 5 c0 .6-.2 1.2-.6 1.6 l-7.8 7.8 C13.8 16.5 12.8 17 11.5 17 s-2.4-.5-3.5-.6 l-.1-1.1 .1-.1 c.1-.1.2-.2.2-.2 C8.5 15.3 10 14.2 11 13 l6.3-6.3 c.5-.5.8-.7 1.3-.8 C19.1 5.8 19.4 5.8 19.8 5.8 c.4 0 .8.1 1.2.2 C21.4 6 21.6 6.1 21.8 6.1 L21.9 4.2 M2.01 4.2 C1 4.8 1 5 1 5 c0 .6.2 1.2.6 1.6 l7.8 7.8 C10.1 16.5 11.2 17 12.5 17 s2.4-.5 3.5-.6 l.1-1.1 -.1-.1 c-.1-.1-.2-.2-.2-.2 C15.4 15.3 14 14.2 13 13 L6.7 6.7 c-.5-.5-.8-.7-1.3-.8 C4.9 5.8 4.6 5.8 4.2 5.8 c-.4 0-.8.1-1.2.2 L2.1 6.1 L2.1 4.2 M21.9 4.2 C20.9 4.8 20.9 5 20.9 5 c0 .6-.2 1.2-.6 1.6 l-7.8 7.8 C13.8 16.5 12.8 17 11.5 17 s-2.4-.5-3.5-.6 l-.1-1.1 .1-.1 c.1-.1.2-.2.2-.2 C8.5 15.3 10 14.2 11 13 l6.3-6.3 c.5-.5.8-.7 1.3-.8 C19.1 5.8 19.4 5.8 19.8 5.8 c.4 0 .8.1 1.2.2 C21.4 6 21.6 6.1 21.8 6.1 L21.9 4.2" />
</svg>
<span class="sr-only">Share via Email</span>
</a>
<!-- Pinterest Button -->
<a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
bg-gradient-to-r from-red-600 to-red-800 text-white
dark:from-red-700 dark:to-red-900">
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.01 2.2 C6.53 2.2 2.15 6.6 2.15 12.1 c0 1.7.45 3.3.13 4.1 L2 21.8 l5.1-.9 c.7.3 1.4.4 2.2.4 L12.01 22 c5.48 0 9.87-4.4 9.87-9.9 C21.88 6.6 17.5 2.2 12.01 2.2 M17.7 10.4 c-.4 1.7-.5 2.5-.9 3.8-1.1 3.5-3.5 5.5-6.6 5.5-2.2 0-3.6-1.1-4.2-2.1-.8-1.3-.9-2.5-.9-3.8 0-1.2.2-2.3.6-3.4 1-2.9 3.5-5 6.7-5 2.5 0 4.1.8 4.7 1.9.7 1.1.9 2.5.4 4.1zm-4.7-2.7c-1.2 0-2.2.4-2.8 1.1-.6.7-.8 1.6-.8 2.5s.2 1.8.8 2.5c.6.7 1.6 1.1 2.8 1.1 1.2 0 2.2-.4 2.8-1.1.6-.7.8-1.6.8-2.5s-.2-1.8-.8-2.5c-.6-.7-1.6-1.1-2.8-1.1z" />
</svg>
<span class="sr-only">Share on Pinterest</span>
</a>
<!-- Link Copy Button -->
<button type="button" aria-label="Copy link" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
bg-gradient-to-r from-purple-500 to-indigo-600 text-white
dark:from-purple-600 dark:to-indigo-700">
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 4 C8.68 4 6 6.68 6 10 s2.68 6 6 6 c.5 0 .9-.4 1-.9.1-.5-.2-1-.7-1.1-.3-.1-.5-.1-.7-.1-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4c0 1.1-.5 2.1-1.3 2.8-.4.4-.4 1-.1 1.4.3.4.9.5 1.3.2 1.1-1 1.8-2.5 1.8-4.4 C18 6.68 15.32 4 12 4 M12 20 c-3.32 0-6-2.68-6-6 s2.68-6 6-6 c.5 0 .9.4 1 .9.1.5-.2 1-.7 1.1-.3.1-.5.1-.7.1-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4c0-1.1-.5-2.1-1.3-2.8-.4-.4-.4-1-.1-1.4.3-.4.9-.5 1.3-.2 1.1 1 1.8 2.5 1.8 4.4 C18 17.32 15.32 20 12 20 z" />
</svg>
<span class="sr-only">Copy link</span>
</button>
</div>
</div>
</div>관련 구성 요소
Social Share Buttons 구성 요소
단색 색 구성표가 있는 레트로/빈티지 소셜 공유 버튼 구성 요소입니다. 포트폴리오에 적합한 어두운 테마를 지원하는 복잡하고 반응이 빠른 디자인입니다. JavaScript 없이 Tailwind CSS를 사용합니다.
Social Share Buttons 구성 요소
Tailwind CSS를 사용하여 Brutalism 스타일, 반응형 효과 및 어두운 테마를 지원하는 소셜 공유 버튼 구성 요소입니다.