Glassmorphism 바닥글 탐색
Glassmorphism 스타일, 생생한 색 구성표 및 대시보드 목적을 위한 복잡한 레이아웃이 있는 바닥글 탐색 구성 요소. Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 디자인.
HTML 코드
<footer class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-pink-500 text-white dark:bg-blue-500 dark:bg-opacity-20 dark:text-gray-200 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2 md:col-span-1">
<h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">About Us</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Careers</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Partnerships</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Press</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Products</h3>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Features</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Pricing</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Integrations</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">API</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Resources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Blog</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Documentation</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Support</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Community</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Legal</h3>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Privacy Policy</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Terms of Service</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="mt-8 border-t border-indigo-300 dark:border-indigo-700 pt-6 text-center text-sm">
<p>© 2023 Your Company. All rights reserved.</p>
</div>
</div>
</footer>관련 구성 요소
Retro_Jewel_Tone_Dashboard_Footer_Navigation
대시보드용 반응형 바닥글 탐색 구성 요소로, 보석 색조 색상(에메랄드, 사파이어, 루비)과 다크 모드 지원을 통해 레트로/빈티지 미학에서 영감을 받았습니다. 여기에는 탐색 링크, 소셜 미디어 아이콘 및 저작권 정보가 포함됩니다.
Footer Navigation 구성 요소
반응형이고 복잡한 Neumorphism 스타일의 Footer Navigation Component는 다크 모드를 지원하는 그레이스케일 색 구성표를 사용하는 기업 웹 사이트를 위한 것입니다. 자바스크립트가 없습니다.
Footer Navigation 구성 요소
80년대와 90년대의 미학에서 영감을 받은 레트로/빈티지 스타일로 디자인된 바닥글 탐색 구성 요소입니다. 어두운 테마를 지원하며 완벽하게 반응합니다.