JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<iframe class="calendar" src="https://calendar.google.com/calendar/r/week" frameborder="0"></iframe>
<iframe class="tasks" src="https://todoist.com/app#agenda%2Foverdue%20%26%20!assigned%20to%3A%20other%2C%207%20days%20%26%20!assigned%20to%3A%20other" frameborder="0"></iframe>
<iframe class="notes" src="https://keep.google.com/u/0/#home" frameborder="0"></iframe>

CSS

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "calendar tasks"
    "calendar notes";
  margin: 0;
}

iframe {
  width: 100%;
  height: 100%;
}

.calendar {
  grid-area: calendar;
}
.tasks {
  grid-area: tasks;
}
.notes {
  grid-area: notes;
}