Header component

[andrewjamesford]

A react header component contains header components like logo and navigation. Will show on every page in the web app. Responsive design:

• mobile,
• tablet
• and desktop Can be themed (Radix UI).

[OmarKing015]

const Header = () => {

  return (
    <header className="bg-gray-800 text-white">
      <div className="container mx-auto flex items-center justify-between py-4">
<div className="text-2xl font-bold">My Logo</div>
      </div>

//button of navbar
<nav>
      <ul className="flex space-x-4">
        <li>
          <a href="/" className="hover:text-gray-300">Home</a>
        </li>
        <li>
          <a href="/about" className="hover:text-gray-300">About</a>
        </li>
        <li>
          <a href="/contact" className="hover:text-gray-300">Contact</a>
        </li>
      </ul>
    </nav>
    </header>
  );
};

export default Header;

this is made by tailwind and react

[andrewjamesford]

Will re-look at UI theming - Possibly TailwindCSS