Add Layout component and add docs links to navbar

src/components/Layout.tsx

+import type { AppProps } from 'next/app';
+import React, { Children } from 'react';
+
+import Nav from './placeholder/PlaceholderNav';
+
+export default function Layout({
+  children,
+}: {
+  children: JSX.Element;
+}): JSX.Element {
+  return (
+    <>
+      <Nav />
+      <main>{children}</main>
+    </>
+  );
+}

src/components/placeholder/PlaceholderNav.tsx

@@ -2,8 +2,11 @@ import Link from 'next/link';
 import React from 'react';
 
 const links = [
-  { href: 'https://github.com/vercel/next.js', label: 'GitHub' },
-  { href: 'https://nextjs.org/docs', label: 'Docs' },
+  {
+    href: 'https://tailwindcss.com/docs/utility-first',
+    label: 'Tailwind Docs',
+  },
+  { href: 'https://nextjs.org/docs', label: 'Next.js Docs' },
 ];
 
 export default function Nav(): JSX.Element {
@@ -18,7 +21,7 @@ export default function Nav(): JSX.Element {
         <ul className="flex items-center justify-between space-x-4">
           {links.map(({ href, label }) => (
             <li key={`${href}${label}`}>
-              <a href={href} className="btn-blue no-underline">
+              <a href={href} className="btn-blue">
                 {label}
               </a>
             </li>

src/pages/index.tsx

+import Layout from 'components/Layout';
 import Nav from 'components/placeholder/PlaceholderNav';
 import React from 'react';
 
 export default function IndexPage(): JSX.Element {
   return (
-    <div>
-      <Nav />
+    <Layout>
       <div className="py-20">
         <h1 className="text-5xl text-center">Next.js + Tailwind CSS</h1>
       </div>
-    </div>
+    </Layout>
   );
 }

src/style/globalStyles.css

@@ -6,5 +6,5 @@
 @import 'tailwindcss/utilities.css';
 
 .btn-blue {
-  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
+  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded no-underline whitespace-no-wrap;
 }