Footer Navigation 구성 요소
80년대와 90년대의 미학에서 영감을 받은 레트로/빈티지 스타일로 디자인된 바닥글 탐색 구성 요소입니다. 어두운 테마를 지원하며 완벽하게 반응합니다.
HTML 코드
<footer class="bg-gray-800 text-white py-8 mt-10">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="text-center md:text-left">
<h2 class="text-2xl font-bold mb-2">Stay Connected!</h2>
<p>Follow us on our social media channels:</p>
<div class="flex justify-center md:justify-start mt-4 space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full">
</a>
<a href="#" class="text-gray-400 hover:text-white">
<img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full">
</a>
<a href="#" class="text-gray-400 hover:text-white">
<img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="rounded-full">
</a>
</div>
</div>
<nav class="mt-6 md:mt-0">
<ul class="flex flex-col md:flex-row space-x-4">
<li><a href="#" class="hover:text-gray-400 transition">Home</a></li>
<li><a href="#" class="hover:text-gray-400 transition">About</a></li>
<li><a href="#" class="hover:text-gray-400 transition">Services</a></li>
<li><a href="#" class="hover:text-gray-400 transition">Contact</a></li>
</ul>
</nav>
</div>
<div class="text-center mt-6">
<p class="text-gray-500 text-sm">© 2023 Your Company. All rights reserved.</p>
</div>
</footer>
관련 구성 요소
Brutalist_Pastel_News_Footer
뉴스/저널리즘 웹 사이트를 위한 복잡하고 야만적인 스타일의 바닥글 탐색 구성 요소로, 파스텔 색상, 고대비 및 특이한 레이아웃을 특징으로 합니다. 완벽하게 반응하며 다크 모드를 지원합니다.
3D_Music_Footer_Navigation
음악/오디오 플랫폼을 위한 복잡한 3D에서 영감을 받은 바닥글 탐색 구성 요소로, 따뜻한 중립 색상과 다크 모드 지원으로 완전한 응답성을 제공합니다.
Footer Navigation 구성 요소
소셜 미디어 인터페이스를 위한 삼궁 색 구성표가 있는 브루탈리즘 스타일로 설계된 간단한 바닥글 탐색 구성 요소입니다. 여기에는 다크 모드를 지원하는 링크와 아바타 이미지가 포함됩니다.