JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div class="header">My cool header</div>
<iframe class="pageFrame" src="https://example.com/" frameborder="0"></iframe>
<div class="footer">And a snazzy footer to match</div>

CSS

html, body {
  /*
  It's possible for the <body> to take up less
  than the full screen size, which can cause some
  weirdness. This fixes that.
  */
  width: 100%;
  height: 100%;
}

body {
  /*
  I'm using CSS grid here to make the iframe
  grow and shink, but there are plenty of options.
  Flexbox is another good one.

  https://css-tricks.com/snippets/css/complete-guide-grid/
  */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "pageFrame"
    "footer";
}

.header {
  grid-area: header;
  padding: 16px;
  background: blue;
  color: #fff;
}

.pageFrame {
  grid-area: pageFrame;
}

.footer {
  grid-area: footer;
  padding: 16px;
  background: green;
  color: #fff;
}