Footer Navigation 구성 요소
레트로/빈티지 디자인 스타일의 반응형 바닥글 탐색 구성 요소로, 생생한 색상을 사용하고 소셜 미디어 인터페이스에 맞게 조정되었습니다.
HTML 코드
<footer class="bg-gradient-to-b from-purple-500 to-pink-600 dark:from-purple-900 dark:to-pink-800 py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-white text-center mb-4 md:mb-0">
<h2 class="text-2xl font-bold">Stay Connected</h2>
<p class="text-sm">Follow us on our social channels</p>
</div>
<div class="flex space-x-4">
<a href="https://facebook.com" class="text-white hover:underline">
<img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="inline-block">
</a>
<a href="https://twitter.com" class="text-white hover:underline">
<img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="inline-block">
</a>
<a href="https://instagram.com" class="text-white hover:underline">
<img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="inline-block">
</a>
<a href="https://linkedin.com" class="text-white hover:underline">
<img src="https://picsum.photos/30/30?random=4" alt="LinkedIn" class="inline-block">
</a>
</div>
</div>
</div>
<div class="text-center text-white text-sm mt-4">
<p>© 2023 Your Company. All rights reserved.</p>
</div>
</footer>