Footer Navigation 구성 요소
Footer Navigation Component with Dark Mode 및 Responsive Effects
HTML 코드
<footer class="bg-gray-900 text-gray-300 py-8">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-between items-center">
<div class="w-full md:w-1/4 mb-4 md:mb-0">
<h3 class="text-lg font-semibold text-white mb-2">Company</h3>
<ul>
<li><a href="#" class="hover:text-white">About Us</a></li>
<li><a href="#" class="hover:text-white">Careers</a></li>
<li><a href="#" class="hover:text-white">Press</a></li>
</ul>
</div>
<div class="w-full md:w-1/4 mb-4 md:mb-0">
<h3 class="text-lg font-semibold text-white mb-2">Products</h3>
<ul>
<li><a href="#" class="hover:text-white">Features</a></li>
<li><a href="#" class="hover:text-white">Pricing</a></li>
<li><a href="#" class="hover:text-white">Integrations</a></li>
</ul>
</div>
<div class="w-full md:w-1/4 mb-4 md:mb-0">
<h3 class="text-lg font-semibold text-white mb-2">Support</h3>
<ul>
<li><a href="#" class="hover:text-white">Help Center</a></li>
<li><a href="#" class="hover:text-white">API Status</a></li>
<li><a href="#" class="hover:text-white">Contact Us</a></li>
</ul>
</div>
<div class="w-full md:w-1/4">
<h3 class="text-lg font-semibold text-white mb-2">Legal</h3>
<ul>
<li><a href="#" class="hover:text-white">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white">Terms of Service</a></li>
</ul>
</div>
</div>
<div class="mt-8 border-t border-gray-700 pt-4 flex flex-col md:flex-row items-center justify-between">
<p>© 2023 Your Company. All rights reserved.</p>
<div class="flex space-x-4 mt-4 md:mt-0">
<a href="#" class="hover:text-white"><i class="fab fa-facebook"></i></a>
<a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</footer>
관련 구성 요소
Footer Navigation 구성 요소
Neumorphism 디자인, 단색 색 구성표, 복잡한 복잡성 및 소셜 미디어 목적을 가진 바닥글 탐색 구성 요소. 어두운 테마를 지원하는 반응형 디자인.
Footer Navigation 구성 요소
다크 모드의 비즈니스/기업 웹사이트를 위해 설계된 반응형 바닥글 탐색 구성 요소로, 트라이어드 색 구성표와 대화형 기능을 통한 중간 복잡성을 특징으로 합니다.
Glassmorphism 바닥글 탐색
Glassmorphism 스타일, 생생한 색 구성표 및 대시보드 목적을 위한 복잡한 레이아웃이 있는 바닥글 탐색 구성 요소. Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 디자인.