JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="color-scheme" content="light dark">
    <title>FxView Layout prototype</title>
  </head>

  <body>
    <nav>
      <div>
        <p class="annotation">Nav</p>
        <p class="annotation placeholder-block">[0] Branding</p>
      </div>
    </nav>
    <main>
      <section>
        <p class="annotation">Main</p>
        <p class="annotation placeholder-block">[1] Tab Pickup</p>
      </section>
      <aside>
        <p class="annotation">Aside</p>
        <p class="annotation placeholder-block">[2] Colorways promo</p>
      </aside>
      <section>
        <p class="annotation placeholder-block">[3] Recently Closed</p>
      </section>
    </main>
  </body>
</html>

CSS

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

.annotation {
  font-size: small;
  color: white;
  background: #333;
}
.placeholder-block {
  min-height: 6em;
}

/* from common-shared.css */

body {
  font-size: 15px;
  font-weight: normal;
  margin: 0;
}

/* end common-shared.css */
:host,
:root {
  --sidebar-width: 200px;
  --layout-gutter: 48px;
}

body {
  display: flex;
  align-items: stretch;
  padding-block: 40px 80px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Helvetica Neue", sans-serif;
}

h1 {
  font-size: 24px;
  font-weight: 700;
}

body > nav {
  padding-inline: var(--layout-gutter);
  border-inline-end-width: 1px;
  width: var(--sidebar-width);
  flex: 0 1 auto;
}

body > main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 16px;
  padding-inline-end: var(--layout-gutter);
}

body > main > section {
  grid-column: 1 / 5;
}

body > main > aside {
  grid-column: 5 / -1;
  padding-inline-start: var(--layout-gutter);
}

[hidden] {
  display: none !important;
}

/* just for visual clarity in the prototype */
body > nav {
  background-color: rgba(0,0,0,0.2);
}
body > main {
  background-color: rgba(0,0,0,0.3);
}

body > main > aside {
  background-color: rgba(0,0,0,0.3);
}

@media (min-width: 1154px) {
  /* just for visual clarity in the prototype */
  body {
    background-color: papayawhip;
  }
}

@media (max-width: 1153px) {
  :host,
  :root {
    --sidebar-width: 56px;
    --layout-gutter: 24px;
  }
  /* just for visual clarity in the prototype */
  body {
    background-color: peachpuff;
  }
}

@media (max-width: 983px) {
  body {
    background-color: tan;
  }
}

@media (max-width: 689px) {
  body > main > section {
    grid-column: 1 / -1;
  }
  body > main > aside {
    grid-column: 1 / -1;
    padding-inline-start:...