Luxury_Pastel_Government_Footer
政府または公共サービスのWebサイト向けのエレガントでレスポンシブなフッターコンポーネントで、パステルカラーの配色とダークモードのサポートを備えた豪華なデザインが特徴です。ナビゲーションリンク、連絡先情報、ソーシャルメディア、著作権が含まれています。
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