CCHub Logo CCHub Tailwind Collection
コンポーネント フッター バウハウス単色ヘルスケアフッター

バウハウス単色ヘルスケアフッター

バウハウスのデザイン原則に触発された、ヘルスケアアプリケーション向けのシンプルで機能的なフッターコンポーネント。単色の配色、レスポンシブレイアウト、ダークモードのサポートが特徴です。

プレビュー

HTMLコード 

<footer class="bg-gray-100 py-6 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
    <div class="mb-4">
      <a href="#" class="text-gray-800 dark:text-gray-200 text-2xl font-bold tracking-tight">MediCare</a>
    </div>
    <nav class="flex flex-wrap justify-center space-x-4 sm:space-x-6 mb-4">
      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors duration-200 text-sm">Privacy Policy</a>
      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors duration-200 text-sm">Terms of Service</a>
      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors duration-200 text-sm">Contact Us</a>
    </nav>
    <p class="text-gray-500 dark:text-gray-500 text-xs sm:text-sm">&copy; 2023 MediCare. All rights reserved.</p>
  </div>
</footer>

関連コンポーネント

フッター コンポーネント フッター

類似の配色を使用した、微妙な Skeuomorphism デザインのシンプルなフッター コンポーネント。これには、著作権表示、いくつかのナビゲーションリンク、ソーシャルメディアアイコンが含まれています。デザインはレスポンシブで、ダークモードをサポートしています。

開ける

フッターコンポーネント

レスポンシブエフェクトとTailwind CSSを使用したダークテーマのサポートを備えたBrutalismスタイルのフッターコンポーネント。

開ける

サイバーパンクフッターコンポーネント

パープル/バイオレットトーンを使用した未来的なサイバーパンクの美学を備えたシンプルで応答性の高いフッターコンポーネントで、テクノロジー/ SaaSアプリケーションに適しています。ダークモードのサポートが含まれています。

開ける