组件 页脚 极简社交媒体页脚

极简社交媒体页脚

一个为社交媒体界面设计的极简页脚组件,采用土色调配色方案。响应式并支持黑暗主题。

预览

HTML 代码

<footer class="bg-gray-200 dark:bg-gray-800 py-6">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <div class="mb-4 md:mb-0">
        <p class="text-gray-700 dark:text-gray-300 text-sm">&copy; 2023 SocialMedia. All rights reserved.</p>
      </div>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300 ease-in-out">
          <i class="fab fa-facebook-f"></i>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300 ease-in-out">
          <i class="fab fa-twitter"></i>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300 ease-in-out">
          <i class="fab fa-instagram"></i>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300 ease-in-out">
          <i class="fab fa-linkedin-in"></i>
        </a>
      </div>
    </div>
  </div>
</footer>

相关组件

Neumorphic Vibrant 页脚

一个简单、响应式的页脚组件,采用 neumorphic 设计原则和鲜艳的色彩进行样式设置。它具有柔和的凸出外观,带有微妙的阴影,同时保持高饱和度的强调色。页脚包括网站导航、社交链接和版权信息的基本部分,并完全支持深色模式。

打开

Neumorphism 页脚组件

支持深色主题的响应式 Neumorphism Footer Component

打开

页脚组件

一个简单的响应式页脚组件,采用复古/复古风格设计,支持深色主题,使用 Tailwind CSS。它具有适合商业/公司网站的基本布局。

打开