First solution using next.js and tailwindcss.

What did you find difficult while building the project?

• This was my first time using tailwind and next.js with the new app router.
• I spend a decent amount of time reading the docs for project layout/installation even though this project was pretty simple.

Which areas of your code are you unsure of?

• I did place the code section in the provided project files as a "footer" here:

function Footer() {
  return (
    <div className="sticky bottom-0 text-center">
      Challenge by{" "}
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" className="font-bold underline hover:decoration-2">
        Frontend Mentor
      </a>
      . Coded by <a href="https://www.github.com/njpoli" className="font-bold underline hover:decoration-2">njpoli</a>.
    </div>
  );
}

I placed my footer in the page.tsx file like so:

export default function Page() {
  return (
    <>
      <div className="flex flex-col justify-center items-center h-screen">
        <QRCode />
      </div>
      <Footer />
    </>
  );
}

However, this created a small scroll bar even though the footer is correctly sticking to the bottom of the viewport. When I place the footer inside of the div with the QRCode component, it doesnt go to the bottom of the viewport, it is directly under the QRCode component. How can I have the footer stick to the bottom without creating a scrollbar?

Do you have any questions about best practices?

Should the footer contain the sticky css property or does that belong in the parent component? Any other tips/suggestions welcome as well.