JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>IP Profiling</title>
    <meta name="description" content="Site about my own IP Profiling">
    <meta name="author" content="DraconiX">
    <meta name="keywords" content="">
  </head>

  <body>
  
    <div class="flex-container">
        <div class="flex-navigation">
             
        
        </div>

        <div class="flex-content">
            
            huhu

        </div>
    </div>

  </body>  
</html>

CSS

body 
{ 
    background-color: whitesmoke; 
    font-family: Consolas, monaco, monospace;
    color: slategrey;
    margin: 0;
}

html, body {
  height: 100%;
}

h1 {
  font: 200 50px/1.3 'Berkshire Swash', Helvetica, sans-serif;
  color: whitesmoke;
  text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
}


/* Startpunkt des Flex-Layouts */

.flex-container 
{
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    min-height: 100%;
}

.flex-navigation {
    flex-grow: 0;
    flex-shrink: 0;
    width: 300px;
    flex-basis: auto; 
    box-shadow: 0 0 45pt 10pt #111111;
}

.flex-content
{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto
}