JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <header>
        header
    </header>
    <main>
        <aside>
            aside left
        </aside>
        <article>
            <h1>CONTENT</h1>
            <pre>
&lt;button class=&quot;btn btn-primary num-badge num-badge--text-primary&quot; data-num-badge=&quot;9&quot;&gt;Primary button&lt;/button&gt;
&lt;button class=&quot;btn btn-primary num-badge num-badge--text-primary num-badge--border-primary&quot; data-num-badge=&quot;9&quot;&gt;Primary button&lt;/button&gt;
&lt;button class=&quot;btn btn-primary num-badge num-badge--text-primary num-badge--border-primary num-badge--font-awesome&quot; data-num-badge=&quot;&amp;#xf021;&quot;&gt;Primary button&lt;/button&gt;
&lt;a class=&quot;num-badge&quot; data-num-badge=&quot;9&quot;&gt;Basic Link&lt;/a&gt;;</pre>
        </article>
        <aside>
            aside right
        </aside>
    </main>
    <footer>
        footer
    </footer>
</body>
</html>

CSS

body {
  margin: 0;
}

header {
  background-color: green;
}

footer {
  background-color: red;
}

header,
footer {
  width: 100%;
  height: 100px;
}

main {
  display: flex;

  background-color: purple;
}

aside {
  overflow-x: hidden;
  flex: 0 0 270px;
}

article {
  flex-grow: 1;

  min-height: 100vh;

  background-color: lightgray;
}

pre {
  overflow: auto;

  font-size: 87.5%;

  color: #dc3545;
}