JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="filler-top"></div>
<div id="the-item">
</div>
<div id="filler-bottom"></div>

CSS

#the-item {
  width: 80vw;
  height: 30vh;
  border: 2px solid lightblue;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
#filler-top {
  width: 100%;
  flex: 1;
}
#filler-bottom {
  width: 100%;
  flex: 2;
}