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

レトロポートフォリオナビゲーション

パステルカラースキーム、レスポンシブ、ダークモードをサポートするポートフォリオ用のレトロ/ビンテージナビゲーションコンポーネント。

                <nav class="bg-gradient-to-r from-pink-200 via-purple-200 to-indigo-200 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-6 shadow-lg font-mono">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse mb-4 md:mb-0">
      <span class="self-center text-3xl font-semibold whitespace-nowrap text-gray-800 dark:text-gray-100">
        My Portfolio
      </span>
    </a>
    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
      </svg>
    </button>
    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
      <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 dark:border-gray-700">
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">Projects</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">About</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">Contact</a>
        </li>
        <li>
          <div class="relative group">
            <button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 md:w-auto dark:text-gray-100 md:dark:hover:text-purple-400 dark:focus:text-gray-100 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown
              <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
              </svg>
            </button>
            <!-- Dropdown menu -->
            <div id="dropdownNavbar" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600 absolute group-hover:block">
              <ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
                </li>
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
                </li>
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
                </li>
              </ul>
              <div class="py-1">
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

Glassmorphism単色中程度のEコマースナビゲーションコンポーネント、ダークモードサポート

プレビューを開く

                <nav class="p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-20 text-gray-800 dark:text-white shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">

    <!-- Logo or Brand Name -->
    <a href="#" class="text-xl font-bold p-2">ShopSphere</a>

    <!-- Mobile Menu Button -->
    <button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-300">
      <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-4 6h4"></path>
      </svg>
    </button>

    <!-- Navigation Links -->
    <div class="hidden lg:flex flex-grow items-center justify-center" id="navbar-collapse">
      <ul class="flex flex-col lg:flex-row gap-1 lg:gap-4">
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Home</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Products</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Categories</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">About Us</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Contact</a></li>
      </ul>
    </div>

    <!-- Search and Cart Icons -->
    <div class="flex items-center gap-2 p-2">
        <a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">
            <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </a>
        <a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300 relative">
            <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">3</span>
        </a>
    </div>

  </div>
</nav>

レトロなEコマースナビゲーションバー

eコマース向けのレトロ/ビンテージスタイルのグレースケールナビゲーションコンポーネントで、ホバーやドロップダウンなどのインタラクティブな要素を備えた適度な複雑さが特徴です。レスポンシブで、Tailwind CSSを使用したダークモードのサポートが含まれています。

プレビューを開く

                <nav class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-md">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="text-lg font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
      <div class="relative group">
        <button class="hover:text-gray-900 dark:hover:text-white transition duration-300">Shop</button>
        <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-lg mt-2 py-2 w-48">
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">All Products</a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 1</a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 2</a>
        </div>
      </div>
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
    </div>
    <div class="flex items-center space-x-4">
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">
        <svg xmlns="http://www.w3.org/2000/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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
      </a>
      <button class="md:hidden">
        <svg xmlns="http://www.w3.org/2000/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 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>
  </nav>

レトロなソーシャルメディアナビゲーション

ソーシャルメディア用のダークモードを備えたレスポンシブナビゲーションコンポーネント(レトロ/ビンテージ、アーストーン、中程度の複雑さ)

プレビューを開く

                <nav class="bg-stone-200 dark:bg-stone-800 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-xl font-bold text-stone-800 dark:text-stone-200">SocialApp</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Feed</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Profile</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Messages</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Settings</a></li>
    </ul>
  </div>
</nav>

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

ブルータリズムスタイルでデザインされたナビゲーションコンポーネントで、ソーシャルメディアインターフェース用のパステルカラースキームが特徴で、レスポンシブレイアウトとダークテーマがサポートされています。

プレビューを開く

                <nav class="flex flex-col md:flex-row justify-between items-center p-4 bg-pink-200 dark:bg-gray-800">
  <div class="flex items-center mb-4 md:mb-0">
    <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white">MySocial</h1>
  </div>
  <ul class="flex flex-col md:flex-row">
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Home</a>
    </li>
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Profile</a>
    </li>
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Messages</a>
    </li>
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Settings</a>
    </li>
    <li class="mx-2">
      <a href="#" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-200">Logout</a>
    </li>
  </ul>
</nav>

<section class="p-4 space-y-5">
  <article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
    <h2 class="font-bold text-gray-800 dark:text-white">Recent Posts</h2>
    <p class="text-gray-700 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </article>
  <article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
    <h2 class="font-bold text-gray-800 dark:text-white">User Activity</h2>
    <p class="text-gray-700 dark:text-gray-200">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
  <article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
    <h2 class="font-bold text-gray-800 dark:text-white">Trending Topics</h2>
    <p class="text-gray-700 dark:text-gray-200">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </article>
</section>

<footer class="bg-pink-200 dark:bg-gray-800 p-4 text-center">
  <p class="text-gray-800 dark:text-white">© 2022 MySocial. All rights reserved.</p>
</footer>

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

ブルータリズムスタイルで設計されたレスポンシブナビゲーションコンポーネントで、ポートフォリオWebサイトに最適な単色の配色を示しています。機能には、ハイコントラストの大胆なレイアウト、Tailwind CSSを使用したダークモードのサポート、ドロップダウンやボタンリンクなどのインタラクティブ要素が含まれます。

プレビューを開く

                <nav class="bg-gray-900 dark:bg-gray-800 p-5 flex justify-between items-center">
    <div class="text-white font-bold text-2xl">
        Portfolio
    </div>
    <ul class="flex space-x-6">
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Home</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">About</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Projects</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Contact</a>
        </li>
    </ul>
    <div class="relative group">
        <button class="text-gray-300 hover:text-white transition duration-200 focus:outline-none">
            Menu
        </button>
        <div class="absolute left-0 mt-2 w-48 bg-gray-700 dark:bg-gray-600 rounded-md shadow-xl opacity-0 group-hover:opacity-100 transition duration-200 ease-in-out">
            <a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 1</a>
            <a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 2</a>
        </div>
    </div>
</nav>

<section class="bg-gray-800 dark:bg-gray-900 p-10">
    <h2 class="text-white text-3xl font-bold mb-4">Featured Projects</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 1</h3>
                <p class="text-gray-300">Short description of project 1.</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 2</h3>
                <p class="text-gray-300">Short description of project 2.</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 3</h3>
                <p class="text-gray-300">Short description of project 3.</p>
            </div>
        </div>
    </div>
</section>

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

ブログの 3D デザインでスタイル設定された複雑なナビゲーションコンポーネントで、トライアドカラースキームとレスポンシブダークテーマのサポートが特徴です。

プレビューを開く

                <nav class="bg-gray-800 p-5 shadow-lg rounded-lg relative overflow-hidden">
    <div class="absolute inset-0 transform -translate-x-2 -translate-y-2 bg-gradient-to-r from-blue-500 to-green-500 opacity-20 rounded-lg"></div>
    <h1 class="text-white text-3xl font-bold relative z-10">My Blog</h1>
    <ul class="flex space-x-4 mt-4">
        <li class="relative group">
            <a href="#" class="text-blue-300 hover:text-blue-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-blue-500">Home</a>
        </li>
        <li class="relative group">
            <a href="#" class="text-green-300 hover:text-green-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-green-500">About</a>
        </li>
        <li class="relative group">
            <a href="#" class="text-red-300 hover:text-red-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-red-500">Contact</a>
        </li>
        <li class="relative group">
            <a href="#" class="text-yellow-300 hover:text-yellow-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-yellow-500">Blog</a>
        </li>
    </ul>
    <div class="mt-5 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white">
            <span class="text-white">Welcome, User!</span>
        </div>
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition ease-in-out duration-300">Search</button>
    </div>
</nav>

<!-- Dark Mode Styling -->
<nav class="dark:bg-gray-900 dark:text-gray-200 dark:shadow-2xl">
    <div class="dark:bg-gradient-to-r dark:from-blue-600 dark:to-green-600 dark:opacity-30 dark:rounded-lg"></div>
    <h1 class="dark:text-white">My Blog</h1>
    <ul class="space-x-4">
        <li>
            <a href="#" class="dark:text-blue-500 hover:dark:text-blue-400">Home</a>
        </li>
        <li>
            <a href="#" class="dark:text-green-500 hover:dark:text-green-400">About</a>
        </li>
        <li>
            <a href="#" class="dark:text-red-500 hover:dark:text-red-400">Contact</a>
        </li>
        <li>
            <a href="#" class="dark:text-yellow-500 hover:dark:text-yellow-400">Blog</a>
        </li>
    </ul>
    <div class="flex items-center justify-between">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="rounded-full">
            <span>Welcome, User!</span>
        </div>
        <button class="bg-blue-600 text-white">Search</button>
    </div>
</nav>

ブルータリストのソーシャルメディアナビゲーション

ソーシャルメディアアプリケーション向けのブルータリズムスタイルで設計されたレスポンシブナビゲーションコンポーネントで、補色の配色と最小限の要素を利用しています。

プレビューを開く

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 flex justify-between items-center">
    <div class="flex items-center space-x-4">
        <a href="#" class="text-white dark:text-gray-200 font-bold text-lg">Logo</a>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a></li>
        </ul>
    </div>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
        <a href="#" class="text-white dark:text-gray-200 font-bold">Logout</a>
    </div>
</nav>
<div class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Social Media</h1>
    <img src="https://picsum.photos/800/400" alt="Random Image" class="rounded-lg shadow-lg">
</div>

スキューモーフィックナビゲーション

Skeuomorphicデザイン、ソーシャルメディアアプリケーションに適した類似の配色、ダークテーマのサポートを備えたシンプルでレスポンシブなナビゲーションコンポーネント。

プレビューを開く

                <nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-gray-800 dark:text-gray-200 font-bold text-xl">SocialApp</div>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Home
        </div>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Profile
        </div>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Messages
        </div>
      </a>
    </div>
  </div>
</nav>

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

スキューモーフィックスタイルで設計されたナビゲーションコンポーネントで、補色の配色が特徴で、データの視覚化とコントロールパネルを備えたダッシュボードに適しています。これには、ユーザーエンゲージメントのためのインタラクティブな要素が含まれています。

プレビューを開く

                <nav class="bg-gray-800 dark:bg-gray-900 shadow-lg rounded-lg p-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="w-12 h-12 rounded-full mr-3 shadow-lg">
        <h1 class="text-2xl font-bold text-white">Dashboard</h1>
    </div>
    <div class="mt-4 md:mt-0">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="text-white hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Profile</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Settings</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Logout</a>
            </li>
        </ul>
    </div>
</nav>

<section class="p-6 bg-white dark:bg-gray-800 rounded-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 1</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 2</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 3</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
    </div>
</section>

カテゴリ

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