Glassmorphism フッター コンポーネント
ぼかし効果のあるすりガラスのような半透明の要素を特徴とする glassmorphism スタイルのレスポンシブフッターコンポーネントで、ダークテーマをサポートします。
HTMLコード
<footer class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg p-6 dark:bg-gray-800 dark:bg-opacity-30 transition duration-300 ease-in-out">
<div class="container mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-center md:text-left">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Connect with Us</h2>
<p class="text-gray-600 dark:text-gray-300">Stay updated with our latest news and offers.</p>
</div>
<div class="mt-4 md:mt-0">
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full " /></a>
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full " /></a>
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full " /></a>
</div>
</div>
<div class="flex justify-center mt-4">
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Privacy Policy</a>
<span class="text-gray-500 dark:text-gray-300">|</span>
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Terms of Service</a>
</div>
</div>
</footer>関連コンポーネント
フッター コンポーネント フッター
類似の配色を使用した、微妙な Skeuomorphism デザインのシンプルなフッター コンポーネント。これには、著作権表示、いくつかのナビゲーションリンク、ソーシャルメディアアイコンが含まれています。デザインはレスポンシブで、ダークモードをサポートしています。
ニューモーフィックバイブラントフッター
シンプルでレスポンシブなフッター コンポーネントで、ニューモルフィックなデザイン原則と鮮やかな色でスタイル付けされています。繊細な影のある柔らかく押し出された外観が特徴で、彩度の高いアクセントカラーを維持しています。フッターには、サイトナビゲーション、ソーシャルリンク、およびダークモードを完全にサポートする著作権情報の基本セクションが含まれています。