JSFiddle - React, Tailwind, and code Playground

by Luca Giuberti

HTML

<html>
  <head>
    <style>
      html {
        display: flex;
        min-height: 100%;
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 1.5;
        background-color: rgb(250, 250, 250);
        color: rgb(22, 23, 26);
        -webkit-font-smoothing: auto;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
          Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol";
        padding: 0px;
        margin: 0px;
      }

      body {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        overscroll-behavior-y: none;
      }

      #root {
        height: 100%;
        width: 100%;
      }

      @media (min-width: 1648px) {
        .wrapper {
          grid-template-columns: 256px 1fr;
          grid-template-areas: "navigation main";
        }
      }
      .wrapper {
        display: grid;
        width: 100%;
        grid-template-columns: 72px 1fr;
        grid-template-areas: "navigation main";
      }

      @media (min-width: 1648px) {
        .navigation {
          width: 256px;
        }
      }

      .navigation {
        background-color: yellow;
        position: sticky;
        top: 0px;
        width: 72px;
        height: 100vh;
        grid-area: navigation / navigation / navigation / navigation;
        overflow: hidden auto;
      }

      .main {
        display: grid;
        justify-self: center;
        grid-template-columns: minmax(320px, 400px) minmax(600px, 968px);
        grid-template-rows: 100%;
        grid-template-areas: "secondary primary";
        max-width: 1392px;
        gap: 24px;
        margin: 0px 24px;
      }

      .secondary {
        background-color: green;
        height: 100vh;
        position: sticky;
        top: 0px;
        padding-bottom: 48px;
        overflow: hidden auto;
        grid-area: secondary / secondary...

CSS

.secondary::-webkit-scrollbar {
          display: none;
}