组件 页脚 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.

打开

企业预订页脚

一个复杂的响应式企业页脚组件,专为预订/预订系统设计,具有暖色中性色和深色模式支持,使用语义 HTML 和 Tailwind CSS。

打开

Glassmorphism_Footer_Component

一个响应式的 glassmorphism 风格的页脚组件,专为预订/预订系统而设计,具有互补的配色方案、交互式元素和完整的深色模式支持。

打开