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>