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>
관련 구성 요소
소셜 미디어 바닥글 구성 요소
소셜 네트워킹 인터페이스를 위한 반응형 바닥글 구성 요소로, 단색 파란색 색 구성표를 사용하는 Material Design 원칙에 따라 설계되었습니다. 그리드 기반 레이아웃, 깊이 효과(그림자), 대화형 요소에 대한 호버 및 전환 애니메이션, 뉴스레터 구독 양식, 소셜 아이콘, 사용자 아바타 및 Tailwind의 dark: 수정자를 통한 다크 모드 지원을 제공합니다.