Tailwind CSS

Utility-first CSS framework

src/layout.tsx

import { Header, Navbar, Footer } from "./"

const Layout = ({ children }: React.PropsWithChildren<{}>) => {
  return (
    <div className='flex flex-col min-h-screen bg-black'>
      <Header />
      <Navbar />
      <div className='flex-grow'>{children}</div>
      <Footer />
    </div>
  )
}

export default Layout

Tailwind Responsive Classes

Utilizing Tailwind CSS which is a utility-first CSS framework that provides ready-to-use pre-defined classes which help in building a responsive user interface quickly. When using Tailwind with Next.js, we as developers can easily integrate the framework with our projects without the need for configuring a separate build process. This allows us to focus on creating features for our applications with a stylesheet that can be easily customized and optimized.

Reference