JSFiddle - React, Tailwind, and code Playground

by Svedberg

HTML

<div class="container">
  <header>
    <h1> Malmö FF - Helsingborgs IF (24 / 4 - 19) </h1>
  </header>

  <nav>
  </nav>

  <main>
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/Fdhe-M3TKvw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </main>

  <tags>
    Timeline
  </tags>

  <aside>
    Tags
  </aside>
  <aside2>
    Drawings
  </aside2>

</div>

CSS

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-areas: "nav header header" "nav side2 content" "nav side content" "nav side tags" "nav side tags";
  grid-template-columns: 1fr 2fr 4fr;
  grid-template-rows: auto 1fr 2fr 1fr 1fr auto;
  grid-gap: 20px;
  height: 100vh;
  background-color: #eef1f9;
  margin-top: 0;
  margin-bottom: 0;
}

header {
  grid-area: header;
  background-color: #eef1f9;
  text-align: left;
}

nav {
  grid-area: nav;
  background-color: white;
}

main {
  grid-area: content;
  background-color: white;
  text-align: center;
  border-radius: 10px;
  border:10px solid rgb(0,0,0);
  margin-right: 0.5em;
}

tags {
  grid-area: tags;
  background-color: white;
  text-align: center;
  border-radius: 10px;
  margin-right: 0.5em;
}

aside {
  grid-area: side;
  background-color: white;
  text-align: center;
  border-radius: 10px;
}

aside2 {
  grid-area: side2;
  background-color: white;
  text-align: center;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .container {
    grid-template-areas: "header" "nav" "content" "tags" "side" "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto/* Header */
    minmax(75px, auto)/* Nav */
    2fr/* Content */
    1fr/* Content */
    minmax(75px, auto)/* Sidebar */
    auto;
    /* Footer */
  }
  nav,
  aside {
    margin: 0;
  }
}