header-3

• Vista previa

  LOGO

• Código

  import Link from 'next/link';
  
  const Header3 = () => {
    return (
      <div className="w-full bg-background-secondary rounded-lg p-4 grid md:grid-cols-12 gap-4 items-center justify-center">
        <h1 className="md:col-span-2 flex justify-center md:justify-start font-bold cursor-pointer text-3xl">LOGO</h1>
        <form className="md:col-span-4 flex items-center justify-center gap-2">
          <input type="text" className="w-auto bg-background outline-none p-2 rounded-lg" placeholder="Buscar" />
          <button type="button">
            <i className="fi fi-rr-search"></i>
          </button>
        </form>
        <nav className="md:col-span-6 flex items-center gap-1 justify-end">
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors">
            Inicio
          </Link>
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors">
            Nostros
          </Link>
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors">
            Servicios
          </Link>
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors">
            Blog
          </Link>
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors">
            Contacto
          </Link>
        </nav>
      </div>
    );
  };
  
  export default Header3;