3D 유사 간단한 블로그 바닥글
Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 바닥글 구성 요소. 바닥글은 유사한 색상의 단순한 3D 디자인을 가지고 있습니다. 블로그/콘텐츠 웹사이트에 최적화되어 있습니다.
HTML 코드
<footer class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 text-white py-8 px-4 transform perspective-1000 rotateX-6 translateZ-10 hover:rotateX-0 hover:translateZ-0 transition-all duration-500">
<div class="container mx-auto flex flex-wrap justify-between items-center">
<div class="w-full md:w-1/3 text-center md:text-left mb-4 md:mb-0">
<h3 class="text-xl font-bold mb-2">My Blog</h3>
<p>© 2023 My Blog. All rights reserved.</p>
</div>
<div class="w-full md:w-1/3 text-center mb-4 md:mb-0">
<h3 class="text-xl font-bold mb-2">Quick Links</h3>
<ul>
<li><a href="#" class="hover:underline">Home</a></li>
<li><a href="#" class="hover:underline">Blog</a></li>
<li><a href="#" class="hover:underline">About</a></li>
<li><a href="#" class="hover:underline">Contact</a></li>
</ul>
</div>
<div class="w-full md:w-1/3 text-center md:text-right">
<h3 class="text-xl font-bold mb-2">Follow Me</h3>
<div class="flex justify-center md:justify-end space-x-4">
<a href="#" class="hover:text-gray-300"><i class="fab fa-twitter"></i></a>
<a href="#" class="hover:text-gray-300"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="hover:text-gray-300"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</footer>
관련 구성 요소
포트폴리오-미니멀리스트-트라이어딕-복잡-바닥글
포트폴리오 웹사이트를 위한 복잡하고 미니멀한 스타일의 바닥글로, 트라이어딕 색 구성표를 사용합니다. 탐색 링크, 소셜 미디어 아이콘, 저작권, 연락을 위한 클릭 유도문안이 포함되어 있으며 완전한 응답성과 다크 모드를 지원합니다.
Finance 바닥글 구성 요소
금융 및 은행 인터페이스를 위한 반응형 바닥글 구성 요소로, 보색 구성표, Material Design 원칙 및 완전한 다크 모드 지원을 특징으로 합니다. 탐색 링크, 소셜 미디어 아이콘 및 저작권 고지가 포함됩니다.