CCHub Logo CCHub Tailwind Collection
コンポーネント フッターナビゲーション ミニマリストフッターナビゲーション

ミニマリストフッターナビゲーション

レスポンシブデザインとダークモードをサポートするブログ用のミニマリストフッターナビゲーションコンポーネント。

プレビュー

HTMLコード 

<footer class="bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <div class="mb-4 md:mb-0">
        <p class="text-sm">&copy; 2023 Your Blog Name. All rights reserved.</p>
      </div>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-sm hover:text-gray-900 dark:hover:text-white">Home</a></li>
          <li><a href="#" class="text-sm hover:text-gray-900 dark:hover:text-white">About</a></li>
          <li><a href="#" class="text-sm hover:text-gray-900 dark:hover:text-white">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</footer>

関連コンポーネント

3D Design フッター ナビゲーション コンポーネント

レスポンシブデザインとダークモードをサポートする3Dスタイルのフッターナビゲーションコンポーネント。

開ける

フッターナビゲーションコンポーネント

ダークテーマをサポートするダッシュボード用のレスポンシブフッターナビゲーションコンポーネントで、トライアドカラーと複雑な要素を使用したリンクホバーでのマイクロインタラクションを特徴としています。JavaScriptは不要で、Tailwind CSSを使用したHTMLのみ。

開ける

Glassmorphismフッターナビゲーション

Glassmorphismスタイル、鮮やかな配色、ダッシュボード用の複雑なレイアウトを備えたフッターナビゲーションコンポーネント。Tailwind CSSを使用したダークモードサポートのレスポンシブデザイン。

開ける