Footer Navigation 구성 요소
소셜 미디어 인터페이스를 위한 삼궁 색 구성표가 있는 브루탈리즘 스타일로 설계된 간단한 바닥글 탐색 구성 요소입니다. 여기에는 다크 모드를 지원하는 링크와 아바타 이미지가 포함됩니다.
HTML 코드
<footer class="bg-gray-800 dark:bg-gray-900 text-white py-4">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex flex-col md:flex-row items-center">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2 md:mb-0 md:mr-4">
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Home</a></li>
<li><a href="#" class="hover:text-red-400 dark:hover:text-red-300">About</a></li>
<li><a href="#" class="hover:text-green-400 dark:hover:text-green-300">Contact</a></li>
</ul>
</div>
<div class="flex space-x-4 mt-4 md:mt-0">
<a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Facebook</a>
<a href="#" class="hover:text-red-400 dark:hover:text-red-300">Twitter</a>
<a href="#" class="hover:text-green-400 dark:hover:text-green-300">Instagram</a>
</div>
</div>
</footer>관련 구성 요소
Footer Navigation 구성 요소
반투명 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하는 glassmorphism 스타일을 사용한 반응형 바닥글 탐색 구성 요소입니다. 다크 모드를 지원하며 자리 표시자 이미지를 포함합니다.
Glassmorphism 바닥글 탐색
Glassmorphism 스타일, 생생한 색 구성표 및 대시보드 목적을 위한 복잡한 레이아웃이 있는 바닥글 탐색 구성 요소. Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 디자인.