JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="media"></div>
<div class="page">
  <div class="sidebar">
    <div class="inner">
      <h2>sidebar</h2>
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
    </div>
  </div>
  <div class="content">
    <h2>main content area</h2>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, suscipit voluptates dolorem perspiciatis. Amet, nostrum, deleniti ratione saepe non iste, odio quo velit ad quis quas repellendus laborum neque enim.</div>
    <div>Quis distinctio, dolorum vitae et ipsum eligendi asperiores velit magnam illum laudantium perspiciatis omnis corporis dolores neque cupiditate fugit itaque consectetur voluptas accusamus iste laboriosam ea obcaecati. Ab, vel cupiditate.</div>
    <div>Cumque voluptas repudiandae, odio, facere, iusto ad laboriosam ipsa suscipit, eum quaerat recusandae aperiam sapiente deleniti fugiat dicta? Soluta nam, adipisci quidem cum dignissimos, deleniti delectus velit eum corporis optio.</div>
    <div>Fugiat non vitae minus, quasi alias libero nesciunt repellendus molestias voluptatum, inventore magni necessitatibus deserunt. Nemo sunt, vitae velit voluptatum, at laborum omnis possimus ullam veniam nobis est eveniet delectus.</div>
    <div>Molestias quis eveniet odio nisi repudiandae dicta dignissimos aut dolor, hic possimus repellat alias, praesentium omnis error aliquam assumenda magni ipsam impedit explicabo porro et officiis. Voluptates maiores, cupiditate quae!</div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
}

.page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 22em 1fr;
}

.sidebar .inner {
  background: #e3efe3;
  width: 14em;
}

.content {
  background: #e3e3ef;
}

.media::after {
  display: 'block';
  content: '(large)';
}

@media (max-width: 800px) {
  .page {
    grid-template-columns: 5fr 22em 1fr;
  }
  .media::after {
    content: '(medium)';
  }
}

@media (max-width: 600px) {
  .page {
    grid-template-columns: 1fr;
  }
  .media::after {
    content: '(small)';
  }
}