JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <title>Start Template</title>

</head>

<body class="theme-teal">
    <nav class="navbar"></nav>
	<aside id="leftsidebar" class="sidebar main-sidebar">
	    <div class="legal">
            <div class="copyright">© copyright 2019</div>
        </div>
	</aside>
	
	<section class="content">
	    <div class="main-content">
            <p id="">CONTENT</p>
		</div>
    </section>
</body>

</html>
<style>
    .navbar {
	    border-radius: 0;
	    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
		border: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 12;
		width: 100%;
		min-height: 50px;
        margin-bottom: 20px;
	}
	.theme-teal .navbar {
        background-color: #009688;
    }
	.sidebar {
		font-family: "Roboto", sans-serif;
		background: #fdfdfd;
		width: 300px;
		overflow: hidden;
		display: inline-block;
		height: calc(100vh - 50px);
		position: fixed;
		top: 50px;
		left: 0;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
		z-index: 11 !important;
	}
	.theme-teal .sidebar .legal {
	    background-color: #fff;
	}
	.sidebar .legal {
	    position: absolute;
		bottom: 0;
		width: 100%;
		border-top: 1px solid #eee;
		padding: 15px;
		overflow: hidden;
	}
	.content {
	    min-height: 250px;
		padding: 15px;
		margin-right: auto;
		margin-left: auto;
		padding-left: 15px;
		padding-right: 15px;
		background: #e6e6e6;
	}
	.mainNav {
	    margin-bottom: 0px;
		background: #ecf0f5;
	}
	
	@media (max-width: 1187px){
	    .sidebar {
	        width: 0px;
	    }
	}	
	
</style>