Creating Responsive Layout with Tailwind CSS in Next.js

Provide an example of a responsive layout in Next.js using Tailwind CSS utility classes that adapts to different screen sizes using the mobile-first approach.

import Head from 'next/head';
import 'tailwindcss/tailwind.css';

export default function Home() {
  return (
    <div className='container mx-auto px-4'>
      <Head>
        <title>Responsive Layout with Tailwind CSS in Next.js</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main className='flex flex-col md:flex-row'>
        <aside className='w-full md:w-1/4 p-4 bg-blue-200'>
          <nav>
            {/* Navigation Content */}
          </nav>
        </aside>
        <section className='flex-1 p-4'>
          <header className='mb-4'>
            {/* Header Content */}
          </header>
          <article className='mb-4'>
            {/* Article Content */}
          </article>
          <footer>
            {/* Footer Content */}
          </footer>
        </section>
      </main>
    </div>
  );
}

This example demonstrates how to create a simple responsive layout with Tailwind CSS in a Next.js application. The layout includes a side navigation ('aside') and a main content area ('section') that are stacked vertically on mobile devices (flex-col) and horizontally on medium screens or larger (md:flex-row). The use of the utility classes 'w-full' and 'md:w-1/4' illustrates the mobile-first approach where the 'aside' takes the full width on small screens and a quarter of the width on medium screens or larger.