components/Header.jsx

const Header = () => (
  <header className="bg-gradient-to-r from-blue-600 to-indigo-700 py-6 text-white shadow-md">
    <div className="container mx-auto px-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-3">
          <div className="rounded-lg bg-white bg-opacity-20 p-2">
            <svg
              className="h-8 w-8 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
              />
            </svg>
          </div>
          <h1 className="text-2xl font-bold">Print Modal Demo</h1>
        </div>
        <a
          href="https://huggingface.co/spaces/akhaliq/anycoder"
          target="_blank"
          rel="noopener noreferrer"
          className="rounded-md bg-white bg-opacity-20 px-3 py-1 text-sm font-medium text-white hover:bg-opacity-30"
        >
          Built with anycoder
        </a>
      </div>
    </div>
  </header>
);