Barra di navigazione

Componente della barra di navigazione

Una barra di navigazione reattiva per una dashboard, con un tema della modalità oscura con toni della terra. Include un logo, collegamenti di navigazione, una barra di ricerca e una sezione del profilo utente. Progettato per una complessità moderata con elementi interattivi.

Apri anteprima

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="flex items-center space-x-4">
      <!-- Logo -->
      <a href="#" class="text-white text-2xl font-bold font-serif">DashboardPro</a>

      <!-- Mobile Menu Button -->
      <button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-400 rounded-lg md:hidden hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" aria-controls="mobile-menu" aria-expanded="false">
        <span class="sr-only">Open main menu</span>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
        <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>

    <!-- Navigation Links and Search (Collapsible) -->
    <div class="hidden w-full md:block md:w-auto" id="mobile-menu">
      <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium items-center">
        <li>
          <a href="#" class="block py-2 pr-4 pl-3 text-white rounded bg-transparent md:bg-transparent md:text-amber-300 dark:text-amber-400 md:p-0" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 pr-4 pl-3 text-gray-300 rounded hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-amber-300 dark:hover:text-amber-400 md:p-0">Analytics</a>
        </li>
        <li>
          <a href="#" class="block py-2 pr-4 pl-3 text-gray-300 rounded hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-amber-300 dark:hover:text-amber-400 md:p-0">Reports</a>
        </li>
        <li>
          <a href="#" class="block py-2 pr-4 pl-3 text-gray-300 rounded hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-amber-300 dark:hover:text-amber-400 md:p-0">Settings</a>
        </li>

        <!-- Search Bar -->
        <li class="mt-4 md:mt-0">
          <form class="flex items-center">
            <label for="simple-search" class="sr-only">Search</label>
            <div class="relative w-full">
              <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                <svg class="w-5 h-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
              </div>
              <input type="text" id="simple-search" class="bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-white text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full pl-10 p-2.5" placeholder="Search" required>
            </div>
          </form>
        </li>

        <!-- User Profile/Avatar -->
        <li class="mt-4 md:mt-0">
          <a href="#" class="flex items-center space-x-2 text-gray-300 hover:text-white dark:hover:text-amber-400">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <span class="hidden md:inline-block">John Doe</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Simple JavaScript for mobile menu toggle (can be enhanced) -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.querySelector('[data-collapse-toggle="mobile-menu"]');
    const menu = document.getElementById('mobile-menu');

    button.addEventListener('click', function() {
      menu.classList.toggle('hidden');
    });
  });
</script>

Componente della barra di navigazione

Una barra di navigazione reattiva per un sito di e-commerce, con uno stile di design glassmorphism con una combinazione di colori in scala di grigi e supporto per la modalità scura utilizzando Tailwind CSS.

Apri anteprima

                <nav class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-b border-gray-200 dark:border-gray-700 fixed w-full z-10">
    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
        <div class="relative flex items-center justify-between h-16">
            <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 hover:dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500 dark:focus:ring-offset-gray-800" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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" />
                    </svg>
                </button>
            </div>
            <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                <div class="flex-shrink-0">
                    <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">E-Shop</a>
                </div>
                <div class="hidden sm:block sm:ml-6">
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
                        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Products</a>
                        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About Us</a>
                        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                    </div>
                </div>
            </div>
            <div class="hidden sm:block">
                <div class="flex items-center">
                    <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Login</a>
                    <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Cart</a>
                </div>
            </div>
        </div>
    </div>
</nav>

<div class="sm:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Products</a>
        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About Us</a>
        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Login</a>
        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Cart</a>
    </div>
</div>

Componente della barra di navigazione

Una barra di navigazione responsive con microinterazioni coinvolgenti, progettata per l'e-commerce, utilizzando un tema scuro e colori color terra.

Apri anteprima

                <nav class="bg-brown-800 text-white dark:bg-brown-900 shadow-lg">
    <div class="container mx-auto flex justify-between items-center p-4">
        <a href="#" class="text-2xl font-bold hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Shop</a>
        <div class="hidden md:flex space-x-8">
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Home</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Products</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">About Us</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">
                <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full">
            </a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Cart</a>
        </div>
        <button class="md:hidden text-brown-200 hover:text-brown-500 dark:hover:text-brown-300 transition-colors focus:outline-none">
            <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 12h16m-7 6h7" />
            </svg>
        </button>
    </div>
</nav>

<!-- Responsive adjustments for mobile -->
<div class="md:hidden">
    <ul class="bg-brown-800 text-white dark:bg-brown-900 p-4 space-y-2">
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Home</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Products</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">About Us</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Contact</a></li>
    </ul>
</div>

Barra di navigazione skeuomorphic

Un componente della barra di navigazione del portfolio progettato con stili scheumorfici e una combinazione di colori pastello, incluso il supporto per la modalità scura. Presenta elementi interattivi come link e un menu a discesa.

Apri anteprima

                <nav class="bg-white dark:bg-gray-800 shadow-lg p-4 rounded-lg flex items-center justify-between">  <div class="flex items-center space-x-4">    <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">    <span class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</span>  </div>  <ul class="flex space-x-6">    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Home</a></li>    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">About</a></li>    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Portfolio</a></li>    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Contact</a></li>  </ul>  <div class="relative">    <button class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200 focus:outline-none">      Menu      <span class="inline-flex items-center justify-center w-3 h-3 bg-gray-800 dark:bg-white rounded-full"></span>    </button>    <ul class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg hidden" id="dropdown-menu">      <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Profile</a></li>      <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Settings</a></li>      <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Logout</a></li>    </ul>  </div>  <button class="hidden md:block text-gray-800 dark:text-white border border-gray-400 dark:border-gray-600 rounded-lg px-4 py-2 hover:bg-pink-500 dark:hover:bg-pink-400 transition ease-in-out duration-200">Get Started</button></nav>

Componente della barra di navigazione

Un semplice componente della barra di navigazione reattivo progettato per una dashboard, caratterizzato da una combinazione di colori monocromatica e microinterazioni. Include un supporto per la modalità oscura con effetti al passaggio del mouse per animazioni coinvolgenti.

Apri anteprima

                <nav class="bg-gray-800 dark:bg-gray-900 shadow-lg">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center h-16">
            <div class="flex-shrink-0">
                <h1 class="text-white text-2xl">Dashboard</h1>
            </div>
            <div class="hidden md:block">
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Home</a>
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Profile</a>
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Settings</a>
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Logout</a>
                </div>
            </div>
            <div class="flex md:hidden">
                <button class="text-gray-300 hover:text-white focus:outline-none">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    <h2 class="text-white text-xl mb-4">Welcome to your Dashboard</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
            <h3 class="text-white text-lg">Data Visualization</h3>
            <img src="https://picsum.photos/300/200" alt="Visualization" class="mt-2 rounded" />
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
            <h3 class="text-white text-lg">Control Panel</h3>
            <img src="https://picsum.photos/300/201" alt="Control" class="mt-2 rounded" />
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
            <h3 class="text-white text-lg">User Insights</h3>
            <img src="https://picsum.photos/300/202" alt="Insights" class="mt-2 rounded" />
        </div>
    </div>
</div>

Componente della barra di navigazione

Un componente della barra di navigazione reattivo progettato in stile Material Design con combinazione di colori triadica, adatto per le interfacce dei social media e include il supporto per il tema scuro.

Apri anteprima

                <nav class="bg-blue-600 dark:bg-gray-800 shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50" alt="Logo" class="h-8 w-8 rounded-full">
                </div>
                <div class="hidden md:flex items-center space-x-4 ml-6">
                    <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
                    <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">About</a>
                    <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Services</a>
                    <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                </div>
            </div>
            <div class="hidden md:flex items-center">
                <a href="#" class="flex items-center text-gray-900 dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="h-8 w-8 rounded-full mr-2">
                    Profile
                </a>
            </div>
            <div class="-mr-2 flex md:hidden">
                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-blue-500 dark:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div class="md:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home</a>
            <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">About</a>
            <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Services</a>
            <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
        </div>
    </div>
</nav>

Barra di navigazione del blog

Barra di navigazione reattiva con supporto della modalità oscura per siti Web di blog/contenuti. Presenta un design minimalista/piatto con una combinazione di colori pastello.

Apri anteprima

                <nav class="bg-pink-100 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-lg font-semibold text-gray-800 dark:text-white">My Blog</a>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Blog</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a>
    </div>
  </div>
</nav>

Social-Media-Glassmorphism-Navbar

Barra di navigazione dei social media Glassmorphism reattivo con modalità scura

Apri anteprima

                <nav class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-lg dark:from-gray-800 dark:via-gray-900 dark:to-black dark:bg-opacity-30 fixed w-full z-10">
  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
    <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">SocialApp</span>
    </a>
    <div class="flex md:order-2">
      <button type="button" data-collapse-toggle="navbar-search" aria-controls="navbar-search" aria-expanded="false" class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 me-1">
      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
      </svg>
      <span class="sr-only">Search</span>
      </button>
      <div class="relative hidden md:block">
        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
          <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
          </svg>
          <span class="sr-only">Search icon</span>
        </div>
        <input type="text" id="search-navbar" class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-white bg-opacity-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search...">
      </div>
      <button data-collapse-toggle="navbar-search" 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-search" 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="flex items-center ml-4">
                <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            </div>
    </div>
    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-search">
      <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-white bg-opacity-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 dark:bg-opacity-30 md:dark:bg-transparent 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:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">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:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Profile</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Messages</a>
        </li>
           <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Notifications</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Barra di navigazione del cruscotto Glassmorphism

Glassmorphism Barra di navigazione del cruscotto complesso monocromatico con Tailwind CSS, supporto per temi reattivi e scuri.

Apri anteprima

                <nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white font-bold text-xl">Dashboard</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Settings</a>
      <a href="#" class="text-white hover:text-gray-200">Reports</a>
      <a href="#" class="text-white hover:text-gray-200">Users</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-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Barra di navigazione del portfolio

Una barra di navigazione reattiva con supporto per temi scuri, progettata per un sito Web portfolio utilizzando i principi del Material Design e la combinazione di colori dei toni della terra. Include un logo del marchio, collegamenti di navigazione e un pulsante di invito all'azione. Il design è moderatamente complesso e si adatta a diverse dimensioni dello schermo.

Apri anteprima

                <nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between">
      <div class="flex space-x-7">
        <div>
          
          <a href="#" class="flex items-center py-4 px-2">
            <span class="text-gray-800 dark:text-white text-lg font-bold">Portfolio</span>
          </a>
        </div>
        
        <div class="hidden md:flex items-center space-x-1">
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Home</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Projects</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">About</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Contact</a>
        </div>
      </div>
      
      <div class="hidden md:flex items-center space-x-3 ">
        <a href="#" class="py-2 px-2 font-medium text-gray-500 dark:text-gray-300 rounded hover:bg-green-500 dark:hover:bg-green-400 hover:text-white dark:hover:text-white transition duration-300">Log In</a>
        <a href="" class="py-2 px-2 font-medium text-white bg-green-500 dark:bg-green-400 rounded hover:bg-green-400 dark:hover:bg-green-500 transition duration-300">Sign Up</a>
      </div>
      
      <div class="-mr-2 flex md:hidden">
        <button class="mobile-menu-button p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 dark:hover:bg-gray-700 dark:focus:bg-gray-700">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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>
  </div>

  
  <div class="mobile-menu hidden md:hidden">
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Projects</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">About</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Contact</a>
  </div>
</nav>

Categorie