JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr 12fr 1fr; grid-gap: 10px; width: 100vw; height: 100vh; border-style: none; border-width: 0px; padding: 0px">
    <div style="grid-column: 1 / span 2; grid-row: 1">Link1 Link2 Link3</div>
    <div style="grid-column: 1; grid-row: 2">Text area title 1</div>
    <div style="grid-column: 1; grid-row: 3">
      <textarea style="resize: none;" class="p-3" placeholder="Text area 2"></textarea>
    </div>
    <div style="grid-column: 2; grid-row: 2">Text area title 2</div>
    <div style="grid-column: 2; grid-row: 3">
      <textarea style="resize: none;" class="p-3" placeholder="Text area 2"></textarea>
    </div>
    <div style="grid-column: 1 / span 2; grid-row: 4">Footer</div>
  </div>

CSS

html,
 body {
   height: 100%;
 }

 body {
   margin: 0;
 }

 div {
   border-style: solid;
   border-width: 1px;
   padding: 10px
 }

 textarea {
   border-style: none;
 }