소셜 구성 요소 구성 요소
비즈니스/기업 웹사이트를 위해 설계된 복잡한 소셜 구성 요소 섹션으로, 머티리얼 디자인 원칙과 회색조 색 구성표를 사용합니다. 반응형 디자인과 어두운 테마 지원이 특징입니다.
HTML 코드
<div class="max-w-6xl mx-auto p-5">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Connect with Us</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=1" class="w-full h-32 object-cover rounded-lg" alt="Social Image 1">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us on Twitter</h3>
<p class="text-gray-600 dark:text-gray-400">Stay updated with our latest tweets and news.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Twitter</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=2" class="w-full h-32 object-cover rounded-lg" alt="Social Image 2">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Join Us on LinkedIn</h3>
<p class="text-gray-600 dark:text-gray-400">Connect with us professionally and grow your network.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit LinkedIn</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=3" class="w-full h-32 object-cover rounded-lg" alt="Social Image 3">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Like Us on Facebook</h3>
<p class="text-gray-600 dark:text-gray-400">Join our community and stay updated with our activities.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Facebook</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=4" class="w-full h-32 object-cover rounded-lg" alt="Social Image 4">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Subscribe to Our YouTube</h3>
<p class="text-gray-600 dark:text-gray-400">Watch our latest videos and tutorials.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit YouTube</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=5" class="w-full h-32 object-cover rounded-lg" alt="Social Image 5">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us on Instagram</h3>
<p class="text-gray-600 dark:text-gray-400">Catch a glimpse of our behind-the-scenes.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Instagram</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=6" class="w-full h-32 object-cover rounded-lg" alt="Social Image 6">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Connect on GitHub</h3>
<p class="text-gray-600 dark:text-gray-400">Explore our projects and collaborations.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit GitHub</a>
</div>
</div>
</div>
</div>관련 구성 요소
3D 소셜 작가 카드
블로그/컨텐츠 섹션용으로 설계된 3D 효과 및 소셜 미디어 링크가 있는 반응형 작성자 카드 구성 요소입니다. 보색 구성표(신원/정보의 경우 파란색, 악센트/CTA의 경우 주황색)가 특징이며, 다크 모드를 지원하고, 스타일링에 Tailwind CSS를 사용합니다. 디자인은 기본 레이아웃과 최소한의 요소로 구성된 '단순한' 복잡성이지만 '3D 디자인'은 그림자와 호버 효과를 사용하여 깊이와 몰입도를 위해 통합되었습니다. 구성 요소에는 아바타, 작성자 이름, 짧은 약력, 소셜 미디어 아이콘 및 'Follow Me' 클릭 유도문안 버튼이 포함됩니다. randomuser.me 아바타를 자리 표시자로 사용합니다.