JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://oneillwebs.com/www/css/reset.css">
<link rel="stylesheet" href="http://oneillwebs.com/www/css/grid.css">
<link rel="stylesheet" href="http://oneillwebs.com/www/css/settings.css">
<header class="flex">
    <div class="flex">
        <h1>FINDSKATER</h1>
    </div>
</header>

<main>
    <article>
        <input type="search" />
    </article>
    
    <nav class="flex">
        <div class="flex item"><p>1</p></div>
        <div class="flex item"><p>2</p></div>
        <div class="flex item"><p>3</p></div>
        <div class="flex item"><p>4</p></div>
        <div class="flex item"><p>5</p></div>
        <div class="flex item"><p>6</p></div>
        <div class="flex item"><p>7</p></div>
    </nav>
</main>

<footer>
</footer>

CSS

.flex { display: flex; flex-flow: column; }
.flex-row { display: flex; flex-flow: row; }
.item { flex: 1; }

/* Flex Box */
body { background: black; }
header { height: 13.75%; }
footer { height: 13.75%; }
main { height: 72.5%; overflow-y: scroll; }
nav { height: 100%; }


/* Flex Items */
nav > div { border-top: 1px solid #ccc; background: #f2f2f2; }
nav > div:first-child { border-top: 1px solid transparent; }
nav > div:hover { background: white; }

p { margin: auto; width: 100%; }
input[type="search"] { border: 0; }