JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
		<nav>
			<span>Logo</span>
			<a href="#">login</a>
		</nav>
		<aside>aside</aside>
		<main>main</main>

CSS

* {
				margin: 0;
				padding: 0;
			}

			body {
			  display: grid;
			  font-family: sans-serif;
			}
			
			a {
				text-decoration: none;
				color: white;
			}

			header,
			nav {
				background: blue;
				color: #fff;
			}
			
			nav {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

			nav span {
				margin-right: auto;
			}
			
			header {
				display: none;
			}

			aside {
			  background: lightgreen;
			}

			main {
			  background: pink;
			}

			/* mobile  */
			@media (max-width: 767px) {
				body {
					grid-template-columns: 1fr;
					grid-template-rows: 1fr 1fr 1fr;
				}

				nav,
				aside,
				main {
					grid-column: 1 / 1;
					padding: 0 15px;
				}
			}

			/* tablets */
			@media (min-width: 768px) {
				body {
				  grid-template-columns: 275px 1fr;
				  grid-template-rows: 1fr 1fr;
				}

				nav {
			  		grid-column: 1 / 4;
			  		grid-row: 1;
					height: 50px;
					grid-row: 1;
				}

				aside {
			  		grid-column: 1;
				}

				main {
			  		grid-column: 2;
				}

				nav,
				aside,
				main {
					padding: 0 15px;
				}
			}
			
			/* desktops */
			@media (min-width: 992px) {
				body {
				  grid-template-columns: 10% 275px 1fr 10%;
				  grid-template-rows: 1fr 1fr;
				}

				header {
					display: block;
					grid-column: 1 / -1;
					grid-row: 1;
				}

				nav {
			  		grid-column: 2 / 4;
			  		grid-row: 1;
				}
				aside {
			  		grid-column: 2 / 3;
				}
				main {
			  		grid-column: 3 / 4;
				}
			}
			
			/* xl desktops */
			@media (min-width: 1920px) { 
				body {
					grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
					grid-template-rows: 1fr 1fr;
				}	
			}