HTML 代码
<footer class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg p-6 dark:bg-gray-800 dark:bg-opacity-30 transition duration-300 ease-in-out">
<div class="container mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-center md:text-left">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Connect with Us</h2>
<p class="text-gray-600 dark:text-gray-300">Stay updated with our latest news and offers.</p>
</div>
<div class="mt-4 md:mt-0">
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full " /></a>
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full " /></a>
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full " /></a>
</div>
</div>
<div class="flex justify-center mt-4">
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Privacy Policy</a>
<span class="text-gray-500 dark:text-gray-300">|</span>
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Terms of Service</a>
</div>
</div>
</footer>相关组件
Neumorphic Vibrant 页脚
一个简单、响应式的页脚组件，采用 neumorphic 设计原则和鲜艳的色彩进行样式设置。它具有柔和的凸出外观，带有微妙的阴影，同时保持高饱和度的强调色。页脚包括网站导航、社交链接和版权信息的基本部分，并完全支持深色模式。