1<header className="bg-[#0a0a0b] px-4 pt-4 text-[#f2f2ef] sm:px-6 sm:pt-5">2 <nav className="mx-auto flex max-w-6xl items-center justify-between rounded-full bg-white/4 py-2 pr-2 pl-5 ring-1 ring-white/10">3 <a href="#" className="flex items-center gap-2.5 text-[15px] font-medium tracking-tight">4 <svg viewBox="0 0 24 24" className="size-5" aria-hidden="true">5 <rect x="2" y="2" width="20" height="20" rx="6" fill="#c6f35e" />6 <path d="M7.5 12.5 10.5 15.5 16.5 9" fill="none" stroke="#0a0a0b" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" />7 </svg>8 Onyx9 </a>10 <div className="hidden items-center gap-8 text-sm text-white/60 md:flex">11 <a href="#" className="transition-colors duration-150 hover:text-white">Product</a>12 <a href="#" className="transition-colors duration-150 hover:text-white">Customers</a>13 <a href="#" className="transition-colors duration-150 hover:text-white">Pricing</a>14 <a href="#" className="transition-colors duration-150 hover:text-white">Changelog</a>15 </div>16 <div className="flex items-center gap-1">17 <a href="#" className="hidden rounded-full px-4 py-2 text-sm text-white/70 transition-colors duration-150 hover:text-white sm:block">Sign in</a>18 <a href="#" className="rounded-full bg-[#c6f35e] px-4 py-2 text-sm font-medium text-[#0a0a0b] transition-[scale,background-color] duration-150 ease-out hover:bg-[#d6f886] active:scale-[0.96]">Get started</a>19 </div>20 </nav>21</header>