Glassmorphismフッター
glassmorphism スタイルで設計されたレスポンシブフッターコンポーネントで、すりガラスのようなエフェクトと Tailwind CSS を使用したダークテーマのサポートが特徴です。
HTMLコード
<footer class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-t border-gray-200 dark:border-gray-700 py-10">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
<div class="mb-4 md:mb-0">
<h3 class="text-xl font-semibold">Your Company</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Your slogan or tagline goes here.</p>
</div>
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Random placeholder" class="rounded-full border border-gray-300 dark:border-gray-600">
<p class="text-sm text-gray-600 dark:text-gray-400">Contact us: [email protected]</p>
</div>
</div>
<div class="flex flex-col md:flex-row justify-center md:justify-between mt-8">
<div class="mb-4 md:mb-0">
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Services</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<p class="text-sm text-gray-600 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
</div>
</div>
</div>
</footer>関連コンポーネント
フッターコンポーネント
3D デザイン要素とアース トーンを備えたシンプルでレスポンシブなフッター コンポーネントで、ダーク テーマをサポートするブログやコンテンツ サイト向けに設計されています。
ソーシャルメディアフッターコンポーネント
ソーシャルネットワーキングインターフェイス用のレスポンシブフッターコンポーネントで、モノクロの青の配色を使用してマテリアルデザインの原則に基づいて設計されています。グリッドベースのレイアウト、深度効果(シャドウ)、インタラクティブ要素のホバーおよびトランジションアニメーション、ニュースレター購読フォーム、ソーシャルアイコン、ユーザーアバター、およびTailwindのdark:モディファイアによるダークモードのサポートを備えています。