组件 页脚 Luxury_Pastel_Government_Footer

Luxury_Pastel_Government_Footer

适用于政府或公共服务网站的优雅响应式页脚组件,采用奢华的设计、柔和的配色方案和深色模式支持。包括导航链接、联系信息、社交媒体和版权。

预览

HTML 代码

<footer class="bg-gradient-to-r from-teal-50 to-blue-50 text-gray-700 dark:from-gray-900 dark:to-gray-950 dark:text-gray-300 py-12 px-4 shadow-inner border-t border-gray-200 dark:border-gray-800">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">

    <!-- Logo & Description -->
    <div class="flex flex-col items-start">
      <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse mb-4">
        <svg class="w-8 h-8 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M2.25 6a3 3 0 013-3h13.5a3 3 0 013 3v10.5a3 3 0 01-3 3H5.25a3 3 0 01-3-3V6zm3-.75a.75.75 0 00-.75.75v10.5c0 .414.336.75.75.75h13.5a.75.75 0 00.75-.75V6a.75.75 0 00-.75-.75H5.25zM6 9a.75.75 0 01.75-.75h10.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75H6.75a.75.75 0 01-.75-.75V9z" clip-rule="evenodd" />
        </svg>
        <span class="self-center text-3xl font-serif font-semibold whitespace-nowrap text-teal-800 dark:text-teal-200">Government</span>
      </a>
      <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-xs">
        Committed to serving the public with transparency

相关组件

页脚组件

一个极简主义风格的页脚组件,带有响应式效果和黑暗主题支持,使用Tailwind CSS。

打开

页脚组件 - 预订/预订 - 深色模式糖果

一个复杂的响应式页脚组件,专为预订/预订系统而设计。具有深色模式 UI,具有明亮的糖果/甜蜜颜色、多个导航链接、社交媒体图标和新闻通讯订阅。完全响应并支持深色模式。

打开

页脚组件

以拟物化样式设计的 Footer 组件,具有三元配色方案和适度的复杂度,适用于博客/内容布局。

打开