JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

HTML

<div class="AppManager">
  <div class="signature-page">
    <div class="content">
    * ABC<br/>* ABC<br/>
    </div>
    <div class="pdf-viewer">
      <iframe src="https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf"></iframe>
    </div>
    <div class="pdf-bottom-separator">
      BUTTON
    </div>
  </div>
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
}

.AppManager {
	height: 600px;
  background: yellow;
}

.signature-page {
  height: 100%;
  background: lightblue;
  display: grid;
  grid-template-rows: max-content auto min-content;
}

.content {
  background: coral;
}

.pdf-viewer {
  overflow: scroll;
}

.pdf-bottom-separator {
  background: lightgreen;
}

iframe {
  height: 3000px;
  width: 100%;
  background: darkorchid;
  border: none;
}