tailwind-redwood-page.jsx

export const HomePage = () => {
  return (
    <SiteLayout>
      <div className="flex">
        <SitePanel></SitePanel>
        <SiteContainer></SiteContainer>
      </div>
    </SiteLayout>
  )
}

const SiteLayout = ({ children }) => {
  return (
    <div className="min-site-layout h-screen font-sans bg-white text-gray-900 antialiased">
      {children}
    </div>
  )
}

const SitePanel = () => {
  return (
    <div className="min-site-panel">
      <div className="min-site-account">site account</div>
      <nav className="min-site-navigation">site navigation</nav>
    </div>
  )
}

const SiteContainer = () => {
  return (
    <div className="min-site-container">
      <header className="min-site-header">site header</header>
      <main className="min-site-content">
        <header className="min-page-header">page header</header>
        <section className="min-page-content">page content</section>
      </main>
    </div>
  )
}