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>

関連コンポーネント

Playful_Consulting_Navigation_Component

コンサルティング/サービス向けのシンプルで遊び心があり、陽気なナビゲーションコンポーネントで、丸みを帯びた要素、明るいアクセントのモノクロ配色、ダークモードをサポートする完全な応答性が特徴です。

開ける

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

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

開ける

Cyberpunk_Portfolio_Navigation

複雑で応答性の高いサイバーパンクをテーマにしたポートフォリオのナビゲーションコンポーネントで、近未来的なネオンパープルの美学、暗い背景、インタラクティブな要素が特徴です。ダークモードのサポートが含まれています。

開ける