Footer Navigation 구성 요소
포트폴리오 웹 사이트에 적합한 어두운 테마의 반응형 바닥글 탐색 구성 요소입니다. 단일 색상의 다양한 음영이 있는 단색 색 구성표, 일부 대화형 기능이 있는 중간 복잡성을 특징으로 하며 dark: 접두사를 사용한 다크 모드 지원을 포함하여 스타일링에 Tailwind CSS를 사용합니다.
HTML 코드
<footer class="bg-gray-900 text-white dark:bg-gray-900">
<div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
<div class="mb-8 flex justify-center">
<a class="text-teal-400 dark:text-teal-300" href="/">
<span class="sr-only">Home</span>
<span class="text-2xl font-bold">YourPortfolio</span>
</a>
</div>
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<div>
<p class="text-center text-base text-gray-400 dark:text-gray-500 lg:text-left">
Showcasing innovative projects and creative solutions.
</p>
<p class="mt-4 text-center text-base text-gray-400 dark:text-gray-500 lg:text-left">
© 2024 YourPortfolio. All rights reserved.
</p>
</div>
<div class="col-span-2">
<div class="grid grid-cols-1 gap-8 text-center sm:grid-cols-2 lg:grid-cols-3">
<div>
<p class="font-medium text-white dark:text-gray-200">Services</p>
<nav class="mt-4 flex flex-col space-y-2">
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Web Development</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">UI/UX Design</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Digital Marketing</a>
</nav>
</div>
<div>
<p class="font-medium text-white dark:text-gray-200">Company</p>
<nav class="mt-4 flex flex-col space-y-2">
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">About Us</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Careers</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Blog</a>
</nav>
</div>
<div>
<p class="font-medium text-white dark:text-gray-200">Contact</p>
<nav class="mt-4 flex flex-col space-y-2">
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Get in Touch</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Support</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">FAQ</a>
</nav>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-gray-800 pt-8 sm:items-center sm:justify-between sm:flex">
<p class="text-center text-xs text-gray-500 dark:text-gray-600 sm:text-left">
Designed and developed with ❤️
</p>
<ul class="mt-4 flex justify-center gap-6 sm:mt-0 lg:justify-end">
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Facebook</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Dribbble</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</footer>관련 구성 요소
Footer Navigation 구성 요소
단색 색 구성표가 있는 Glassmorphism 스타일로 설계된 간단한 바닥글 탐색 구성 요소입니다. 반응형이고 다크 모드를 지원하며 전자 상거래 웹 사이트에 적합합니다.
Glassmorphism 바닥글 탐색
Glassmorphism 스타일, 생생한 색 구성표 및 대시보드 목적을 위한 복잡한 레이아웃이 있는 바닥글 탐색 구성 요소. Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 디자인.