Tailwind app architecture and include food hero pattern

[jamesncox]

Description

1. In App.js create Tailwind utility classes on <main> element for inherited colors, fonts and breakpoints shared by the entire project.
2. Remove the vanilla CSS from App.css and replace with food hero pattern in the body {} class.

Related Issue

Closes #44 Closes #36

Acceptance Criteria

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
✓	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

Before

 <main className="App">

After

<main className="flex flex-col items-center bg-midnight-green min-h-screen text-gray-200 font-roboto mx-auto lg:w-2/3">

Testing Steps / QA Criteria

1. On main run git pull
2. Run git checkout tailwind-app-architecture
3. Run git install
4. Run npm start
5. Open your favorite responsive browser tool and observe the behaviour of the hero pattern hiding/showing at Tailwind's lg breakpoint which is 1024px https://tailwindcss.com/docs/breakpoints

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 56aede1):

https://tcl-23-shopping-list--pr45-tailwind-app-archite-ifokj7no.web.app

_{(expires Sun, 30 May 2021 17:50:53 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}