import React from "react";

const Header = () => {
  return (
    <header className="bg-white shadow">
      <div className="container mx-auto px-4 py-6 flex justify-between items-center">
        <h1 className="text-4xl font-medium">headlines</h1>
        <nav className="space-x-4">
          <a
            href="#"
            className="text-lg font-medium text-gray-700 hover:text-gray-900"
          >
            Home
          </a>
          <a
            href="#"
            className="text-lg font-medium text-gray-700 hover:text-gray-900"
          >
            World
          </a>
          <a
            href="#"
            className="text-lg font-medium text-gray-700 hover:text-gray-900"
          >
            Local{" "}
            <span className="text-sm bg-yellow-300 text-yellow-800 rounded-full px-2 py-1">
              Beta
            </span>
          </a>
          <a
            href="#"
            className="text-lg font-medium text-gray-700 hover:text-gray-900"
          >
            Business
          </a>
          <a
            href="#"
            className="text-lg font-medium text-gray-700 hover:text-gray-900"
          >
            Tech
          </a>
          <a
            href="#"
            className="text-lg font-medium text-gray-700 hover:text-gray-900"
          >
            Culture
          </a>
        </nav>
      </div>
    </header>
  );
};

export default Header;