JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<title>Page responsive 116 Flexbox et Grid</title>
		<style>
			/* Structure */
			body {
				display: flex;
				flex-direction: column;
				min-height: 100vh;
        border: 5px solid #aaa;
        background-color: yellow;
			}
			main {
				display: flex;
				flex: 1 1 auto;
        border: 3px solid red;
			}
			/* Mise en forme */
			body {
				margin: 0;
			}
			header, footer {
				background-color: aquamarine;
        border: 3px solid blue;
			}
			header h1, footer p {
				text-align: center;
			}
			aside, nav {
				width: 50em;
        border: 3px solid green;
			}
			aside {
				background-color: bisque;
			}
			nav {
				background-color: lightblue;
			}
			aside, nav, article {
				padding: 5px;
        
			}
			nav ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			nav a {
				text-decoration: none;
				color: black;
			}
			/* Responsive Design */
			@media (max-width: 1000px) {
				main {
					flex-direction: column;
				}
				aside, nav {
					width: auto;
				}
				nav {
					order: -1;
				}
			}
      p {
        font-size: 1.5em;
        }
       .p1 {
          margin-left: 5px;
        }
        .foo {
          color: red;
        }
		</style>
	</head>
	<body>
		<header>
			<h1>Entête (dans le header)</h1>
      <p class="p1">
        En gris, taille du "body" 100%.
      </p>
		</header>
		<main>
			<aside>
				<h3>ASIDE<br> Venenatis Tristique Adipiscing</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
			</aside>
			<article>
				<h2>ARTICLE <br>Inceptos Egestas Fringilla Fermentum</h2>
				<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent...