Navegación

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

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