JSFiddle - React, Tailwind, and code Playground

by dholbert

HTML

<div class="flex">
  <div>
    hi
  </div>
  <canvas height=50 width=50></canvas>
</div>

<div class="flex zero-insets">
  <div>
    hi
  </div>
  <canvas height=50 width=50></canvas>
</div>

CSS

.flex {
  display: grid;
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid black;
}

.flex > * {
  align-self: center;
  justify-self: center;
  border: 3px solid red;
  position: absolute;
}
.zero-insets > * {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}