JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
  <li class="item first">a</li>
  <li class="item">b</li>
  <li class="item">c</li>
  <li class="item">d</li>
  <li class="item">e</li>
  <li class="item last">f</li>
</ul>

CSS

.list {
  position:relative;
  height:200px;
  width:200px;
  padding:0;
  margin:0;
  list-style-type:none;
  background:#aaa;
  display:flex;
  flex-direction:column;
  text-align:center;
  justify-content:center;
}
.item {
  padding:0;
  margin:0;
  flex:0 0;
  background:pink;
}
.first {
  position:absolute;
  top:0;
  width:100%;
}
.last {
  position:absolute;
  bottom:0;
  width:100%;
}