Componentes de búsqueda

Categorías

Componentes Navegación

Navegación

Componentes que ayudan a los usuarios a navegar por el sitio web y encontrar contenido

Navegación minimalista de comida/restaurante en tono joya

Un componente de navegación minimalista y receptivo para sitios web de alimentos y restaurantes, con tonos joya, soporte para modo oscuro y un diseño plano y limpio. Incluye un logotipo, enlaces de navegación y un botón de llamada a la acción, con un menú de hamburguesas apto para dispositivos móviles.

Abrir Vista previa

                <nav class="bg-emerald-600 dark:bg-emerald-900 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-white" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-1.636 6.364l-.707-.707M12 21v-1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M9 11a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0zm-9 9a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0z"></path>
      </svg>
      <span class="text-white text-xl font-bold font-serif">FoodieFinds</span>
    </a>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-8">
      <a href="#menu" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Menu
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#how-it-works" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        How It Works
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#restaurants" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Restaurants
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#contact" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>

    <!-- Call to Action Button -->
    <div class="hidden md:block">
      <button class="bg-white text-emerald-700 dark:bg-emerald-700 dark:text-white px-5 py-2 rounded-full font-semibold hover:bg-emerald-100 dark:hover:bg-emerald-600 transition-all duration-300 shadow-md">
        Order Now
      </button>
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button class="text-white focus:outline-none focus:ring-2 focus:ring-emerald-200 rounded-md p-1" aria-label="Toggle menu">
        <svg class="h-7 w-7" 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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation Menu (hidden by default, would be toggled by JS) -->
  <!-- For demonstration, using simple display classes; in a real app, you'd use JS to toggle 'hidden' -->
  <div class="md:hidden hidden bg-emerald-700 dark:bg-emerald-800 py-2" id="mobile-menu">
    <a href="#menu" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Menu</a>
    <a href="#how-it-works" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">How It Works</a>
    <a href="#restaurants" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Restaurants</a>
    <a href="#contact" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Contact</a>
    <div class="px-4 py-2">
      <button class="w-full bg-white text-emerald-700 dark:bg-emerald-700 dark:text-white px-5 py-2 rounded-full font-semibold hover:bg-emerald-100 dark:hover:bg-emerald-600 transition-all duration-300 shadow-md">
        Order Now
      </button>
    </div>
  </div>
</nav>

Componente de navegación neumórfica

Un componente de navegación simple y receptivo con un estilo de diseño neumórfico, que utiliza un esquema de color púrpura/violeta, adecuado para un foro o plataforma comunitaria. Incluye soporte para modo oscuro.

Abrir Vista previa

                <nav class="p-4 bg-purple-200 dark:bg-purple-900 shadow-lg dark:shadow-purple-950 rounded-xl m-4 transition-all duration-300 ease-in-out">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <div class="mb-4 md:mb-0">
      <a href="#" class="text-purple-800 dark:text-purple-200 text-3xl font-bold tracking-tight transform transition-transform duration-300 hover:scale-105">
        <span class="block relative leading-none">
          <span class="absolute inset-0 bg-gradient-to-br from-purple-400 to-purple-600 dark:from-purple-700 dark:to-purple-900 rounded-lg blur-sm opacity-70"></span>
          <span class="relative z-10 p-2 rounded-lg shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark text-white dark:text-purple-100">Forum Hub</span>
        </span>
      </a>
    </div>
    <div class="flex flex-wrap justify-center space-x-2 md:space-x-4">
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
        Home
      </a>
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h2v3H5V6zm4 0h2v3H9V6zm4 0h2v3h-2V6zM5 11h2v3H5v-3zm4 0h2v3H9v-3zm4 0h2v3h-2v-3z"></path></svg>
        Categories
      </a>
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
        Messages
      </a>
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
        Profile
      </a>
    </div>
  </div>
</nav>

<style>
  /* Neumorphic Shadows for Light Mode */
  .shadow-neumorphic {
    box-shadow: 6px 6px 12px #bca8e8, -6px -6px 12px #ffffff;
  }
  .shadow-neumorphic-pressed {
    box-shadow: inset 4px 4px 8px #bca8e8, inset -4px -4px 8px #ffffff;
  }
  .shadow-inner-neumorphic {
    box-shadow: inset 3px 3px 6px #8e7eb8, inset -3px -3px 6px #d8c2ff;
  }

  /* Neumorphic Shadows for Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a1980, -6px -6px 12px #8e2cb7;
  }
  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 4px 4px 8px #4a1980, inset -4px -4px 8px #8e2cb7;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 3px 3px 6px #3a1566, inset -3px -3px 6px #5e1f9a;
  }
</style>

Navegación monoespacial en redes sociales

Un componente de navegación complejo y receptivo para aplicaciones de redes sociales, con una estética monoespaciada/de desarrollador con colores apagados y compatibilidad con el modo oscuro. Incluye perfil de usuario, búsqueda, notificaciones y enlaces de navegación principales.

Abrir Vista previa

                <nav class="bg-gray-100 text-gray-800 dark:bg-gray-950 dark:text-gray-200 p-4 border-b border-gray-300 dark:border-gray-800 font-mono">
  <div class="container mx-auto flex flex-wrap items-center justify-between gap-4">
    <!-- Logo/Brand Name -->
    <div class="flex-shrink-0">
      <a href="#" class="text-xl font-bold text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <span class="text-blue-600 dark:text-blue-400">//</span>social_feed
      </a>
    </div>

    <!-- Mobile Menu Toggle -->
    <button id="menu-toggle" class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200" aria-label="Toggle navigation">
      <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"></path>
      </svg>
    </button>

    <!-- Primary Navigation Links (Hidden on mobile by default) -->
    <div id="nav-menu" class="hidden lg:flex flex-grow items-center justify-center space-x-6 text-sm flex-col lg:flex-row w-full lg:w-auto mt-4 lg:mt-0">
      <ul class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-6 w-full lg:w-auto text-center lg:text-left">
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>feed
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>explore
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>groups
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>messages
          </a>
        </li>
      </ul>
    </div>

    <!-- Right-aligned Icons and User Profile -->
    <div class="flex items-center space-x-4 flex-shrink-0 lg:ml-auto">
      <!-- Search Bar -->
      <div class="relative hidden sm:block">
        <input type="text" placeholder="search_user(" class="bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md py-2 pl-4 pr-10 text-sm text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all duration-200 w-32 md:w-48 lg:w-64 placeholder-gray-500 dark:placeholder-gray-500">
        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-500 text-xs">)</span>
      </div>
      
      <!-- Notification Icon -->
      <a href="#" aria-label="Notifications" class="relative p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
        </svg>
        <span class="absolute top-1 right-1 block w-2 h-2 rounded-full bg-red-500 border border-gray-100 dark:border-gray-950"></span>
      </a>

      <!-- User Profile Dropdown -->
      <div class="relative">
        <button id="profile-menu-button" class="flex items-center space-x-2 p-2 rounded-md text-gray-900 dark:text-gray-100 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="User menu">
          <img class="w-8 h-8 rounded-full border-2 border-blue-600 dark:border-blue-400" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar">
          <span class="hidden md:inline text-sm">user@system</span>
          <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="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        
        <div id="profile-menu-dropdown" class="absolute right-0 mt-2 hidden w-48 bg-gray-100 dark:bg-gray-900 rounded-md shadow-lg py-1 border border-gray-300 dark:border-gray-800 origin-top-right z-10">
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
            <span class="text-blue-600 dark:text-blue-400">$</span>profile
          </a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
            <span class="text-blue-600 dark:text-blue-400">$</span>settings
          </a>
          <div class="border-t border-gray-300 dark:border-gray-800 my-1"></div>
          <a href="#" class="block px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
            <span class="text-blue-600 dark:text-blue-400">$</span>logout
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for toggling mobile menu and profile dropdown
  document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.getElementById('menu-toggle');
    const navMenu = document.getElementById('nav-menu');
    const profileMenuButton = document.getElementById('profile-menu-button');
    const profileMenuDropdown = document.getElementById('profile-menu-dropdown');

    menuToggle.addEventListener('click', function() {
      navMenu.classList.toggle('hidden');
      navMenu.classList.toggle('flex'); // Add flex for mobile menu to stack vertically
    });

    profileMenuButton.addEventListener('click', function() {
      profileMenuDropdown.classList.toggle('hidden');
    });

    // Close dropdowns when clicking outside
    document.addEventListener('click', function(event) {
      if (!profileMenuButton.contains(event.target) && !profileMenuDropdown.contains(event.target)) {
        profileMenuDropdown.classList.add('hidden');
      }
      // For mobile menu, only close if clicking outside of the menu area itself but allow clicks within the menu
      if (!menuToggle.contains(event.target) && !navMenu.contains(event.target) && window.innerWidth < 1024) {
        navMenu.classList.add('hidden');
        navMenu.classList.remove('flex');
      }
    });

    // Handle window resize for responsiveness
    window.addEventListener('resize', function() {
      if (window.innerWidth >= 1024) { // Equivalent to Tailwind's 'lg' breakpoint
        navMenu.classList.remove('hidden', 'flex');
        navMenu.classList.add('flex'); // Ensure it's flex on desktop
      } else {
        if (navMenu.classList.contains('flex')) { // If it was opened on mobile, keep it open, otherwise hide
             // Do nothing if it's already flex, as it means it was opened by menuToggle
        } else {
            navMenu.classList.add('hidden');
            navMenu.classList.remove('flex');
        }
      }
       profileMenuDropdown.classList.add('hidden'); // Close profile dropdown on resize
    });
  });
<\/script>

3D_Triadic_Simple_Business_Navigation

Un componente de navegación empresarial simple y receptivo con una estética de diseño 3D y un esquema de color triádico, compatible con el modo oscuro.

Abrir Vista previa

                <nav class="bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 shadow-xl dark:from-gray-800 dark:via-zinc-900 dark:to-black transition-all duration-500 ease-in-out">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex-shrink-0">
      <a href="#" class="text-white text-3xl font-extrabold tracking-tight relative group">
        <span class="block transform -translate-x-0.5 -translate-y-0.5 group-hover:-translate-x-1 group-hover:-translate-y-1 transition-transform duration-300 ease-out z-10 relative">3D Company</span>
        <span class="absolute inset-0 bg-yellow-300 dark:bg-sky-400 opacity-60 rounded-lg blur-sm group-hover:blur-md transition-all duration-300 ease-out"></span>
      </a>
    </div>

    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Home
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Services
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        About
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Contact
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
    </div>

    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-white hover:text-yellow-200 dark:hover:text-sky-300 focus:outline-none focus:text-yellow-200 dark:focus:text-sky-300" aria-label="Toggle navigation">
        <svg class="h-8 w-8" 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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <div id="mobile-menu" class="hidden md:hidden bg-indigo-600 dark:bg-gray-950">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Home</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Services</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">About</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Contact</a>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for mobile menu toggle (not part of Tailwind CSS component but for functional demo)
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    if (button && menu) {
      button.addEventListener('click', function() {
        menu.classList.toggle('hidden');
        // Optional: Change icon on toggle
        const icon = button.querySelector('svg');
        if (menu.classList.contains('hidden')) {
          icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
        } else {
          icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>';
        }
      });
    }
  });
</script>

Navegación retro de comercio electrónico

Componente de navegación receptivo con diseño retro/vintage, tonos tierra y soporte de modo oscuro para comercio electrónico.

Abrir Vista previa

                <nav class="bg-amber-100 dark:bg-amber-950 p-4 font-serif">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-amber-800 dark:text-amber-200 text-2xl font-bold">RetroStore</a>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300">Shop</a>
      <a href="#" class="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300">Categories</a>
      <a href="#" class="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300">Contact</a>
      <a href="#" class="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300">Cart</a>
    </div>
    <div class="md:hidden flex items-center">
      <button class="text-amber-700 dark:text-amber-300 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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Componente de navegación

Un componente de navegación simple y receptivo para un sitio web de portafolio, con una interfaz de usuario de modo oscuro. El diseño utiliza colores complementarios y garantiza la legibilidad y el atractivo estético en varios tamaños de pantalla.

Abrir Vista previa

                <nav class="bg-gray-900 p-4 text-white">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-lg font-bold text-teal-400">MyPortfolio</a>
    <ul class="flex space-x-4">
      <li><a href="#about" class="hover:text-teal-400">About</a></li>
      <li><a href="#projects" class="hover:text-teal-400">Projects</a></li>
      <li><a href="#contact" class="hover:text-teal-400">Contact</a></li>
    </ul>
  </div>
</nav>

Componente de navegación de Material Design

Un componente de navegación de Material Design simple y receptivo para interfaces de redes sociales que utiliza un esquema de color en escala de grises. Presenta un diseño limpio con logotipo, enlaces de navegación, barra de búsqueda y avatar de usuario. Incluye soporte para el modo oscuro usando el prefijo dark: de Tailwind.

Abrir Vista previa

                <!-- Material Design Navigation Component for Social Media -->
<nav class="w-full bg-white dark:bg-gray-900 shadow-md transition-colors duration-200">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <!-- Logo and Brand -->
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <span class="text-gray-800 dark:text-white font-medium text-xl">SocialConnect</span>
        </div>
        
        <!-- Desktop Navigation Links -->
        <div class="hidden md:block ml-10">
          <div class="flex items-center space-x-4">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Home</a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Explore</a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Messages</a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Notifications</a>
          </div>
        </div>
      </div>
      
      <!-- Search Bar -->
      <div class="hidden md:block flex-1 max-w-xs mx-4">
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" 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" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-gray-100 dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 text-sm text-gray-900 dark:text-white transition-colors duration-200" placeholder="Search">
        </div>
      </div>
      
      <!-- Right side - User profile and mobile menu button -->
      <div class="flex items-center">
        <!-- User Avatar -->
        <div class="ml-3 flex items-center">
          <div class="relative">
            <img class="h-8 w-8 rounded-full ring-2 ring-gray-200 dark:ring-gray-700" src="https://randomuser.me/api/portraits/women/72.jpg" alt="User avatar">
            <span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-1 ring-white dark:ring-gray-800 bg-green-400"></span>
          </div>
        </div>
        
        <!-- Mobile menu button -->
        <button type="button" class="md:hidden ml-4 inline-flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors duration-200">
          <svg class="h-6 w-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 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
    
    <!-- Mobile Search Bar (visible on mobile only) -->
    <div class="md:hidden py-2">
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" 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" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-gray-100 dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 text-sm text-gray-900 dark:text-white transition-colors duration-200" placeholder="Search">
      </div>
    </div>
  </div>
  
  <!-- Mobile Navigation Menu (hidden by default) -->
  <div class="hidden md:hidden bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800">Home</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Explore</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Messages</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Notifications</a>
    </div>
  </div>
</nav>

Componente de navegación de neumorfismo

Componente de navegación de neumorfismo optimizado para sitios web de portafolio. Cuenta con un diseño complejo con múltiples elementos interactivos, un diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS. El esquema de color es análogo.

Abrir Vista previa

                <nav class="p-6 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="container mx-auto flex items-center justify-between">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Your Name</span>
    </div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark: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 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>
  <div class="mobile-menu hidden md:hidden mt-4 space-y-2">
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
  </div>
</nav>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }
    .shadow-neumorphic-text-light {
    text-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
  }
     .dark .shadow-neumorphic-text-dark {
    text-shadow: 2px 2px 5px #333333, -2px -2px 5px #555555;
  }
</style>

Navegación de comercio electrónico brutalista

Un componente de navegación de estilo brutalista para el comercio electrónico, con un esquema de color en escala de grises, diseño complejo, capacidad de respuesta y compatibilidad con el modo oscuro, creado con Tailwind CSS.

Abrir Vista previa

                <nav class="bg-gray-900 text-white dark:bg-black dark:text-gray-100 p-4">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="text-2xl font-bold uppercase border-2 border-white dark:border-gray-100 p-2">Store</div>
    <div class="block lg:hidden">
      <button id="menu-toggle" class="text-white dark:text-gray-100 focus:outline-none">
        <svg class="h-6 w-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 id="menu" class="w-full lg:flex lg:items-center lg:w-auto hidden lg:block mt-4 lg:mt-0">
      <ul class="uppercase text-sm lg:flex-grow">
        <li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Home</a></li>
        <li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Shop</a></li>
        <li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Categories</a></li>
        <li class="block mt-4 lg:inline-block lg:mt-0"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Contact</a></li>
      </ul>
      <div class="flex items-center mt-4 lg:mt-0">
        <input type="text" placeholder="Search" class="p-2 text-black dark:text-white bg-white dark:bg-gray-800 border-2 border-white dark:border-gray-100 mr-4">
        <a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Cart (0)</a>
      </div>
    </div>
  </div>
</nav>

<script>
  const menuToggle = document.getElementById('menu-toggle');
  const menu = document.getElementById('menu');

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

Componente de navegación

Un componente de navegación responsivo diseñado para un portafolio, con microinteracciones y compatibilidad con temas oscuros.

Abrir Vista previa

                <nav class="bg-gray-800 text-white dark:bg-gray-900 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Home</a>
            <a href="#portfolio" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Portfolio</a>
            <a href="#about" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">About</a>
            <a href="#contact" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="py-2 px-4 bg-blue-600 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 rounded transition duration-300">Login</a>
            <a href="#" class="py-2 px-4 bg-blue-600 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 rounded transition duration-300">Sign Up</a>
        </div>
    </div>
</nav>

<div class="bg-gray-100 text-black dark:bg-gray-800 dark:text-white">
    <div class="container mx-auto p-8">
        <h1 class="text-3xl font-bold mb-4">My Portfolio</h1>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
                <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h2 class="text-xl font-semibold">Project Title 1</h2>
                    <p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
                <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h2 class="text-xl font-semibold">Project Title 2</h2>
                    <p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
                <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h2 class="text-xl font-semibold">Project Title 3</h2>
                    <p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
                </div>
            </div>
        </div>
    </div>
</div>