CCHub Logo CCHub Tailwind Collection
コンポーネント ナビゲーション強化コンポーネント ナビゲーション強化コンポーネント

ナビゲーション強化コンポーネント

ブルータリズムスタイルでデザインされたナビゲーション強化コンポーネント。レスポンシブ効果、ダークテーマのサポート、プレースホルダー画像を備えています。

プレビュー

HTMLコード 

<nav class="bg-white dark:bg-gray-900 p-6 text-center">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50" alt="Logo" class="rounded-full border-2 border-black dark:border-white">
      <h1 class="text-3xl font-bold text-black dark:text-white">Brutalist Navigation</h1>
    </div>
    <ul class="flex space-x-6 mt-4 md:mt-0">
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Services</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
  <div class="mt-8">
    <h2 class="text-xl text-black dark:text-white">Featured</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100" alt="Placeholder Image 1" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Raw and bold imagery.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image 2" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Unusual and eye-catching layouts.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image 3" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">High contrast designs.</p>
      </div>
    </div>
  </div>
</nav>

関連コンポーネント

ナビゲーション強化コンポーネント

スキューモーフィズムで設計されたナビゲーションコンポーネントで、現実世界の対応物を模倣したデジタル要素を備えています。Tailwind CSSを使用してスタイル設定されており、レスポンシブエフェクトとダークテーマがサポートされています。

開ける

ナビゲーション強化コンポーネント

Tailwind CSSを使用したダークモード用に設計されたレスポンシブナビゲーションコンポーネントで、ロゴ、画像、アバターのプレースホルダーを備えています。

開ける

ナビゲーション強化コンポーネント

Tailwind CSS を使用したマテリアル デザインの概念で設計されたレスポンシブ ナビゲーション コンポーネントで、ダーク テーマのサポートとプレースホルダー イメージが特徴です。

開ける