Footer Navigation 구성 요소
어두운 테마를 지원하는 대시보드를 위한 반응형 바닥글 탐색 구성 요소로, 트라이어딕 색상과 복잡한 요소를 사용하여 링크 호버에 대한 마이크로 인터랙션을 제공합니다. JavaScript는 없으며 Tailwind CSS가 있는 HTML만 있습니다.
HTML 코드
<footer class="bg-blue-100 dark:bg-blue-900">
<div class="container mx-auto px-6 py-8">
<div class="flex flex-col items-center text-center">
<div class="flex flex-wrap justify-center -mx-4">
<a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">About</a>
<a href="#" class="mx-4 text-sm text-red-800 dark:text-red-200 hover:text-red-600 dark:hover:text-red-400 transition duration-300 ease-in-out transform hover:scale-110">Blog</a>
<a href="#" class="mx-4 text-sm text-yellow-800 dark:text-yellow-200 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-110">Careers</a>
<a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">Contact Us</a>
</div>
<p class="mt-4 text-sm text-blue-800 dark:text-blue-200">© 2023 Dashboard Inc. All rights reserved.</p>
</div>
</div>
</footer>관련 구성 요소
바닥글 탐색 구성 요소 38
실제 요소를 모방하기 위해 스큐어모픽 스타일로 설계된 반응형 바닥글 탐색 구성 요소로, 어두운 테마를 지원하고 Tailwind CSS를 사용합니다. 이 구성 요소에는 링크, 자리 표시자 이미지 및 아바타가 포함됩니다.
Footer Navigation 구성 요소
마켓플레이스를 위해 설계된 복잡하고 반응이 빠른 바닥글 탐색 구성 요소로, 흑백 색 구성표와 한 가지 밝은 강조 색(남색)이 있는 어두운 모드 UI를 특징으로 합니다. 탐색, 회사 정보, 법률 링크 및 소셜 미디어에 대한 여러 섹션이 포함되어 있으며 완전한 다크 모드를 지원합니다.