Basic design concept for a nav bar

resources/scripts/TransitionRouter.tsx

@@ -18,6 +18,7 @@ export default ({ basename, children }: Props) => (
                             <Switch location={location}>
                                 {children}
                             </Switch>
+                            <div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
                                 <p className={'text-right text-neutral-500 text-xs'}>
                                     &copy; 2015 - 2019&nbsp;
                                     <a
@@ -27,6 +28,7 @@ export default ({ basename, children }: Props) => (
                                         Pterodactyl Software
                                     </a>
                                 </p>
+                            </div>
                         </section>
                     </CSSTransition>
                 </TransitionGroup>

resources/scripts/components/App.tsx

@@ -39,7 +39,7 @@ const App = () => {
     return (
         <StoreProvider store={store}>
             <Router basename={'/'}>
-                <div className={'mx-auto w-auto'} style={{ maxWidth: '1000px' }}>
+                <div className={'mx-auto w-auto'}>
                     <TransitionRouter basename={'/'}>
                         <Route exact path="/" component={ServerOverviewContainer}/>
                         <Route path="/auth" component={AuthenticationRouter}/>

resources/scripts/components/account/DesignElementsContainer.tsx

@@ -5,9 +5,14 @@ import ContentBox from '@/components/elements/ContentBox';
 export default class DesignElementsContainer extends React.PureComponent {
     render () {
         return (
+            <React.Fragment>
                 <div className={'my-10'}>
                     <div className={'flex'}>
-                    <ContentBox className={'flex-1 mr-4'} title={'A Special Announcement'} borderColor={'border-primary-400'}>
+                        <ContentBox
+                            className={'flex-1 mr-4'}
+                            title={'A Special Announcement'}
+                            borderColor={'border-primary-400'}
+                        >
                             <p className={'text-neutral-200 text-sm'}>
                                 Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!
                             </p>
@@ -64,6 +69,7 @@ export default class DesignElementsContainer extends React.PureComponent {
                         </div>
                     </div>
                 </div>
+            </React.Fragment>
         );
     }
 }

resources/scripts/routers/AccountRouter.tsx

@@ -1,11 +1,49 @@
 import * as React from 'react';
-import { Route, RouteComponentProps } from 'react-router-dom';
+import { Link, NavLink, Route, RouteComponentProps } from 'react-router-dom';
 import DesignElementsContainer from '@/components/account/DesignElementsContainer';
 import AccountOverviewContainer from '@/components/account/AccountOverviewContainer';
 
 export default ({ match }: RouteComponentProps) => (
     <div>
+        <div className={'w-full bg-neutral-900 shadow-md'}>
+            <div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
+                <div className={'flex-1'}>
+                    <Link
+                        to={'/'}
+                        className={'text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100'}
+                        style={{
+                            transition: 'color 150ms linear',
+                        }}
+                    >
+                        Pterodactyl
+                    </Link>
+                </div>
+                <div className={'flex h-full items-center justify-center'}>
+                    <NavLink
+                        to={'/'}
+                        exact={true}
+                        className={'flex items-center h-full no-underline text-neutral-300 hover:text-neutral-100 hover:bg-black px-4'}
+                        style={{
+                            transition: 'background-color 150ms linear, color 150ms linear',
+                        }}
+                    >
+                        Dashboard
+                    </NavLink>
+                    <NavLink
+                        to={'/account'}
+                        className={'flex items-center h-full no-underline text-neutral-300 hover:text-neutral-100 hover:bg-black px-4'}
+                        style={{
+                            transition: 'background-color 150ms linear, color 150ms linear',
+                        }}
+                    >
+                        Account
+                    </NavLink>
+                </div>
+            </div>
+        </div>
+        <div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
             <Route path={`${match.path}/`} component={AccountOverviewContainer} exact/>
             <Route path={`${match.path}/design`} component={DesignElementsContainer} exact/>
         </div>
+    </div>
 );

tailwind.js

@@ -44,7 +44,7 @@ View the full documentation at https://tailwindcss.com.
 let colors = {
     'transparent': 'transparent',
 
-    'black': '#1F2933',
+    'black': 'hsl(210, 27%, 10%)',
     'white': '#ffffff',
     'basically-white': '#fafafb',
 
@@ -196,6 +196,12 @@ module.exports = {
             'system-ui',
             'sans-serif',
         ],
+        'header': [
+            '"IBM Plex Sans"',
+            '"Roboto"',
+            'system-ui',
+            'sans-serif',
+        ],
         'serif': [
             'Constantia',
             '"Lucida Bright"',