Layout Header, Aside, Content + Footer

layout_v1.md

LINKS:

Tailwind Play: https://play.tailwindcss.com/ Preview: http://kevyworks.com/tailwind-basic-layout/

PSEUDO CODE:

<div class="flex flex-col lg:flex-row lg:min-h-screen">
  <!-- COMPONENT: HEADER -->
  <div class="lg:hidden bg-black">
    <div class="text-white text-center p-5">HEADER</div>
  </div>
  <!-- COMPONENT: ASIDE (SHOWS ON TAGGLE FROM HEADER) -->
  <div class="w-[20%] min-w-[326px] hidden lg:flex justify-end bg-gray-100">
    <div class="w-[326px]">
      ASIDE
    </div>
  </div>
  <div class="w-full flex flex-col justify-between">
    <div class="flex-grow">
      <!-- COMPONENT: BANNER -->
      <div class="bg-gray-700 text-white text-center">
        <!-- BANNER CHILDREN -->
        <div class="xl:max-w-[1920px] xl:m-auto bg-gray-600">
          BANNER
        </div>
      </div>
      <!-- COMPONENT: CONTENT -->
      <div class="xl:max-w-[1920px] xl:m-auto">
        <!-- CONTENT CHILDREN -->
        <div class="p-5">
          <p class="text-2xl h-[500px]">SOME CHILD HEADER</p>
        </div>
      </div>
    </div>
    <!-- COMPONENT: Footer -->
    <div class="w-full">
      <div class="bg-gray-500">
        <div class="xl:max-w-[1920px] xl:m-auto p-10 text-center text-white bg-gray-600">
          FOOTER
        </div>
      </div>
    </div>
  </div>
</div>

COMPONENTS:

/* COMPONENT: NavHeader */

import React from 'react';

const NavHeader = ({ children }) => {
  <section className="lg:hidden bg-black">
    {children}
  </section>
};

export default NavHeader;

/* COMPONENT: NavAside */

import React from 'react';

const NavAside = ({ children }) => {
  <section className="w-[20%] min-w-[326px] hidden lg:flex justify-end bg-gray-100">
    <div class="w-[326px]">
      {children}
    </div>
  </section>
};

export default NavAside;

/* COMPONENT: Content */

import React from 'react';

const Content = ({ children }) => {
  <section className="xl:max-w-[1920px] xl:m-auto">
    {children}
  </section>
};

export default Content;

/* COMPONENT: Banner */

import React from 'react';

const Banner = ({ className, children }) => {
  <section className={className}>
    <div className="xl:max-w-[1920px] xl:m-auto">
      {children}
    </div>
  </section>
};

export default Banner;

/* COMPONENT: Footer */

import React from 'react';

const Footer = ({ className }) => {
  <section className={`w-full ${className}`}>
    <div className="xl:max-w-[1920px] xl:m-auto">
      {/* ...Footer Contents... */}
    </div>
  </section>
};

export default Footer;

/* COMPONENT: Layout */

import React from 'react';
import NavHeader from 'NavHeader';
import NavAside from 'NavAside';
import Footer from 'Footer';

const Layout = ({ children }) => {
  <section className="flex flex-col lg:flex-row">
    <NavHeader />
    <NavAside />
    <div className="w-full flex flex-col justify-between">
      <div class="flex-grow">
        {children}
      </div>
      <Footer />
    </div>
  </section>
};

export default Layout;

Usage Sample in Page:

import React from 'react';
import Layout from '../components/Layout';
import Banner from '../components/Banner';
import Content from '../components/Content';

const Index = () => {
  <Layout>
    <Banner className="bg-red-200">
      <p>Sample Banner</p>
    </Banner>
    <Content>
      <p>Lorem ipsum</p>
    </Content>
  </Layout>
}