Skip to content

Instantly share code, notes, and snippets.

@LucasAlfare

LucasAlfare/Navbar.tsx

Created August 16, 2025 16:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save LucasAlfare/f4599520c531125f08f13c916e316678 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save LucasAlfare/f4599520c531125f08f13c916e316678 to your computer and use it in GitHub Desktop.
Download ZIP
ppppp
Raw
Navbar.tsx
import * as React from "react";
interface NavbarProps {
propName: number;
}
const Navbar: React.FC<NavbarProps> = ({ propName }) => {
return (
<header
className={`
fixed top-0 w-full
backdrop-blur-md
bg-black/30
border-b border-gray-700/20
z-50
`}
>
<nav
className={`
max-w-7xl mx-auto
py-6 px-6 lg:px-32
flex items-center justify-between
text-white
`}
>
<a
href="#about"
className="
block
text-xl md:text-2xl font-semibold
bg-gradient-to-r from-blue-600 via-sky-500 to-blue-400
text-transparent bg-clip-text
hover:scale-110 transition duration-300
"
>
LOGOTIPO
</a>
</nav>
</header>
);
};
export default Navbar;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment