Social Share Buttons 구성 요소
단색 색 구성표가 있는 레트로/빈티지 소셜 공유 버튼 구성 요소입니다. 포트폴리오에 적합한 어두운 테마를 지원하는 복잡하고 반응이 빠른 디자인입니다. JavaScript 없이 Tailwind CSS를 사용합니다.
HTML 코드
<div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-sm w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Share My Work</h2>
<div class="grid grid-cols-2 gap-4">
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c.96.2 1.956.333 3.013.333 1.056 0 2.052-.133 3.013-.333L10.3 12.3l-2.01 7.951zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c.002-.001.004-.002.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
<span>Twitter</span>
</a>
<a href="#" class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5 10c0 .99-.607 1.83-1.472 2.15l-.008.003c.594-.962.88-2.03.88-3.15 0-2.316-1.528-4.28-3.92-4.86.04-.15.06-.3.06-.47 0-.74-.23-1.43-.63-2.02l-.004-.007C15.176 4.968 16.945 8.163 17 12zm-3.5 0c0 1.93-1.57 3.5-3.5 3.5S8.5 13.93 8.5 12 10.07 8.5 12 8.5s3.5 1.57 3.5 3.5zm-5.748-1.58C9.53 9.71 10.74 9 12 9s2.47.71 3.248 1.42c-.77-.42-1.68-.67-2.67-.67-.99 0-1.9.25-2.67.67zM12 20.1C8.28 20.1 5 16.82 5 12c0-1.76.67-3.41 1.79-4.66l-.007-.008C5.176 8.163 3 11.233 3 12c0 2.21 1.79 4 4 4v-1h-.5a1.5 1.5 0 00-1.5 1.5v2c0 .83.67 1.5 1.5 1.5h11c.83 0 1.5-.67 1.5-1.5v-2a1.5 1.5 0 00-1.5-1.5H17v-1c2.21 0 4-1.79 4-4s-1.79-4-4-4v1h.5a1.5 1.5 0 001.5-1.5v-2c0-.83-.67-1.5-1.5-1.5h-11c-.83 0-1.5.67-1.5 1.5v2zm4.708 1.42A5.726 5.726 0 0017.9 12c0-1.02-.19-2.007-.545-2.923l-1.107.306c-.002.001-.004.002-.006.003L16.708 11.43z"/></svg>
<span>Facebook</span>
</a>
<a href="#" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.5 13.5h-9V8.5h9v7zm-2-5H9.5v-2h5v2zm-2.5 5H9.5v-2h2.5v2zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
<span>YouTube</span>
</a>
<a href="#" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
<span>Instagram</span>
</a>
<a href="#" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
<span>GitHub</span>
</a>
<a href="#" class="bg-blue-400 hover:bg-blue-500 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
<span>LinkedIn</span>
</a>
</div>
</div>
</div>관련 구성 요소
Social Share Buttons 구성 요소
반응형 소셜 공유 버튼 구성 요소는 전자 상거래 사이트를 위한 단색 구성표가 있는 glassmorphism 스타일로 설계되었습니다. 젖빛 유리와 같은 반투명 요소가 특징이며, 소셜 미디어에서 공유할 수 있는 여러 대화형 버튼이 포함되어 있으며, Tailwind CSS를 사용하여 다크 모드를 지원합니다.
Social Share Buttons 구성 요소
대시보드용으로 설계된 미니멀한 소셜 공유 버튼 구성 요소로, 생생한 색 구성표와 반응형 디자인이 특징이며 다크 모드를 지원합니다.