フッターナビゲーションコンポーネント
マテリアルデザインを使用したEコマース用のフッターナビゲーションコンポーネント - レスポンシブモードとダークモードをサポートするシンプルなコンポーネントで、補色の配色が特徴です。
HTMLコード
<footer class="bg-gray-200 text-gray-700 py-8 dark:bg-gray-800 dark:text-gray-200">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">Shop</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Men's</a></li>
<li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Women's</a></li>
<li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Kids'</a></li>
<li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Sale</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">About Us</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Our Story</a></li>
<li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Careers</a></li>
<li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Press</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Customer Service</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Contact Us</a></li>
<li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Shipping Information</a></li>
<li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Returns & Exchanges</a></li>
<li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">FAQs</a></li>
</ul>
</div>
</div>
<div class="mt-8 text-center text-sm">
<p>© 2023 Your E-commerce Store. All rights reserved.</p>
</div>
</div>
</footer>関連コンポーネント
フッターナビゲーションコンポーネント
ダークテーマをサポートするダッシュボード用のレスポンシブフッターナビゲーションコンポーネントで、トライアドカラーと複雑な要素を使用したリンクホバーでのマイクロインタラクションを特徴としています。JavaScriptは不要で、Tailwind CSSを使用したHTMLのみ。
フッターナビゲーションコンポーネント - インダストリアルオーシャン
オーシャン/ブルーの配色を備えたインダストリアルスタイルの複雑でレスポンシブなフッターナビゲーションコンポーネントで、イベント/会議のWebサイトに適しています。複数列のリンク、ソーシャル メディア アイコン、著作権、およびダーク モードのサポートが含まれます。