検索コンポーネント

カテゴリ

航海法

ユーザーがWebサイト内を移動してコンテンツを見つけるのに役立つコンポーネント

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

ダークモードUI用に設計されたレスポンシブナビゲーションコンポーネントで、リンク、ドロップダウン、ロゴがあり、すべてTailwind CSSでスタイル設定されています。

                <nav class="bg-gray-800 p-4 fixed w-full">
    <div class="flex justify-between items-center">
        <div class="text-white text-lg font-bold">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/40" alt="Logo" class="mr-2 rounded-full">
                MyApp
            </a>
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">Home</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">About</a>
            <div class="relative">
                <button class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded flex items-center">Services
                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
                    </svg>
                </button>
                <div class="absolute left-0 hidden bg-gray-800 text-white mt-1 rounded shadow-md w-40">
                    <a href="#" class="block px-4 py-2 hover:bg-gray-700">Web Design</a>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-700">SEO</a>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-700">Marketing</a>
                </div>
            </div>
            <a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded focus:outline-none">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
                </svg>
            </button>
        </div>
    </div>
</nav>

<div class="mt-16 p-4">
    <h1 class="text-3xl text-white">Welcome to MyApp</h1>
    <p class="text-gray-300">This is an example of a dark mode navigation component using Tailwind CSS.</p>
</div>

<style>
    .dropdown:hover .dropdown-content {
        display: block;
    }
</style>

レトロナビゲーションコンポーネント

80 年代 / 90 年代のヴィンテージの美学を備えたレトロなスタイルのナビゲーションコンポーネントで、レスポンシブデザインと Tailwind CSS を使用したダークテーマのサポートが特徴です。

開けるプレビュー

                <nav class="bg-white dark:bg-gray-800 shadow-lg p-6 rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <span class="text-xl font-bold text-gray-800 dark:text-white">Retro Nav</span>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark:text-white focus:outline-none">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <div class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Home</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">About</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Services</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Contact</a>
        </div>
    </div>
</nav>

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

Tailwind CSSでデザインされたレトロ/ビンテージ風のナビゲーションコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。

開けるプレビュー

                <nav class="bg-gray-800 text-white py-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-xl font-bold hover:text-gray-400 transition duration-300">RetroNav</a>
            <ul class="hidden md:flex space-x-4">
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Home</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">About</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Services</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Contact</a></li>
            </ul>
        </div>
        <div class="md:hidden">
            <button class="text-gray-400 focus:outline-none">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
</nav>

<div class="bg-gray-900 text-white p-8 flex flex-col items-center">
    <h1 class="text-3xl font-bold mb-4">Welcome to RetroNav</h1>
    <p class="mb-4">Experience the nostalgia of the 80s and 90s with our vintage-inspired designs.</p>
    <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-4 rounded-lg shadow-md">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600">
        <span class="font-semibold">User Name</span>
    </div>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
            color: white;
        }
        nav {
            background-color: #2c2c2c;
        }
    }
</style>

物理的なコントロールパネルやダッシュボードなどの現実世界の要素を模倣するように設計されたスキューモーフィックナビゲーションコンポーネント。レスポンシブデザイン、物理的なボタンの押下をシミュレートするホバー効果、ダークテーマのサポートを備えています。ナビゲーションには、微妙な影、グラデーション、テクスチャが含まれており、物理的なインターフェイスを彷彿とさせる 3D の触覚的な外観を作り出しています。

開けるプレビュー

                <!-- Skeuomorphic Navigation Component with Dark Mode Support -->
<nav class="w-full bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 p-2 transition-all duration-300">
  <!-- Container for the nav items -->
  <div class="flex flex-col md:flex-row items-center justify-between">
    
    <!-- Logo Area - Mimicking a metal plate with engraved logo -->
    <div class="flex items-center p-2 bg-gradient-to-r from-gray-300 to-gray-200 dark:from-gray-700 dark:to-gray-800 rounded-lg shadow-inner border border-gray-400 dark:border-gray-600 m-2">
      <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center shadow-lg border-2 border-gray-300 dark:border-gray-700">
        <span class="text-white font-bold text-xl">S</span>
      </div>
      <span class="ml-3 font-bold text-gray-700 dark:text-gray-200 tracking-wider text-shadow">SKEUOUI</span>
    </div>
    
    <!-- Navigation buttons - Mimicking physical buttons -->
    <div class="flex flex-wrap justify-center md:justify-end">
      <!-- Home Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          Home
        </button>
        <div class="h-1 w-full bg-blue-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
      
      <!-- Products Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          Products
        </button>
        <div class="h-1 w-full bg-green-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
      
      <!-- Services Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
          Services
        </button>
        <div class="h-1 w-full bg-purple-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
    </div>
    
    <!-- User Profile - Mimicking an ID badge -->
    <div class="m-2 flex items-center bg-gradient-to-r from-blue-100 to-blue-50 dark:from-blue-900 dark:to-blue-800 p-2 rounded-lg border border-blue-200 dark:border-blue-700 shadow">
      <div class="relative">
        <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="User" class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-600">
        <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></div>
      </div>
      <div class="ml-2">
        <div class="text-sm font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
        <div class="text-xs text-gray-600 dark:text-gray-400">Admin Panel</div>
      </div>
    </div>
  </div>
  
  <!-- Mobile Menu Toggle Button - Styled as a switch -->
  <div class="md:hidden mt-2 flex justify-center">
    <div class="relative w-16 h-8 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner border border-gray-400 dark:border-gray-600 flex items-center p-1 cursor-pointer">
      <div class="absolute left-1 w-6 h-6 bg-gradient-to-br from-white to-gray-200 dark:from-gray-600 dark:to-gray-800 rounded-full shadow transform transition-transform border border-gray-300 dark:border-gray-500"></div>
      <div class="w-full flex justify-between text-xs px-1 font-bold">
        <span class="text-gray-700 dark:text-gray-300">|</span>
        <span class="text-gray-700 dark:text-gray-300">|</span>
      </div>
    </div>
  </div>
</nav>

3D ナビゲーションコンポーネント

Tailwind CSSで設計されたレスポンシブ3Dナビゲーションコンポーネントで、ダークテーマのサポートと魅力的な3次元要素が特徴です。

開けるプレビュー

                <nav class="bg-gray-800 shadow-xl p-4 rounded-lg">
  <div class="flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-lg">
      <h1 class="text-white ml-2 text-2xl font-bold">MyWebsite</h1>
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Home</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">About</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Services</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </div>
  <div class="md:hidden mt-2">
    <div class="flex flex-col space-y-2">
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Home</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">About</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Services</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Contact</a>
    </div>
  </div>
</nav>
<style>
  @media (prefers-color-scheme: dark) {
    nav {
      background-color: #1a202c;
    }
    .text-white {
      color: #f7fafc;
    }
    .text-gray-200 {
      color: rgba(255, 255, 255, 0.7);
    }
    .hover\:bg-gray-700:hover {
      background-color: #4a5568;
    }
    nav a:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
</style>

ガラス張りのグラデーションナビゲーションバー

このナビゲーションバーは、グラデーションカラーとすりガラス効果を組み合わせて、スクロール中に半透明の効果を維持するモダンなガラスデザインを特徴としています。

開けるプレビュー

                <nav class="fixed w-full backdrop-blur-lg bg-gradient-to-r from-purple-500/30 via-pink-500/30 to-indigo-500/30 border-b border-white/10 transition-all duration-300 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="flex items-center">
          <span class="text-white font-bold text-xl tracking-wider">PRISM</span>
          <div class="ml-2 h-8 w-8 rounded-full bg-white/20 flex items-center justify-center">
            <div class="h-4 w-4 bg-white rounded-full animate-pulse"></div>
          </div>
        </a>
      </div>
      
      <!-- Menu Items -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-8">
          <a href="#" class="group relative px-3 py-2 text-white font-medium">
            Home
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
          <a href="#" class="group relative px-3 py-2 text-white/70 hover:text-white font-medium transition-colors duration-200">
            Features
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
          <a href="#" class="group relative px-3 py-2 text-white/70 hover:text-white font-medium transition-colors duration-200">
            Pricing
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
          <a href="#" class="group relative px-3 py-2 text-white/70 hover:text-white font-medium transition-colors duration-200">
            About
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
        </div>
      </div>
      
      <!-- CTA Button -->
      <div>
        <button class="relative overflow-hidden px-6 py-2 bg-white/10 border border-white/20 rounded-full text-white font-medium hover:bg-white/20 transition-all duration-300 group">
          <span class="relative z-10">Get Started</span>
          <span class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"></span>
        </button>
      </div>
      
      <!-- Mobile menu button -->
      <div class="md:hidden">
        <button class="text-white p-2">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

検索コンポーネント

カテゴリ

航海法

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

レトロ ナビゲーション コンポーネント

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

スキューモーフィック ナビゲーション コンポーネント

3D ナビゲーションコンポーネント

ガラス張りのグラデーションナビゲーションバー

レトロナビゲーションコンポーネント

スキューモーフィックナビゲーションコンポーネント