JSFiddle - React, Tailwind, and code Playground

by supertutorial

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content
    <br /> The four arrows are inline images inside the content area.
    <img src="https://gridbyexample.com/examples/code/arrow-top-left.png" alt="top left" class="topleft" />
    <img src="https://gridbyexample.com/examples/code/arrow-top-right.png" alt="top right" class="topright" />
    <img src="https://gridbyexample.com/examples/code/arrow-bottom-left.png" alt="bottom left" class="bottomleft" />
    <img src="https://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="bottom right" class="bottomright" /></div>
  <div class="box footer">Footer<br><a href="https://www.w3schools.com">This is a link</a></div>
</div>
</body>
</html>

CSS

body {
  margin: 40px;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
  position: relative;
}
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}
.wrapper {
        display: grid;
    grid-gap: 10px;
        grid-template-columns: 200px 200px 200px;
        grid-template-areas:
    "header  header  header"
        "sidebar content content"
        "footer  footer  footer";
        background-color: #fff;
        color: #444;
    }
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 50px;
  font-size: 150%;
}
.header,
.footer {
  background-color: #999;
}

.topleft {
  position: absolute;
  top: 0;
  left: 0;
}
.topright {
  position: absolute;
  top: 0;
  right: 0;
}
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 0;
}
.bottomright {
  position: absolute;
  bottom: 0;
  right: 0;
}