JSFiddle - React, Tailwind, and code Playground

HTML

<div class="shift-selection-container">
  <div class="shift-selection-button-wrapper bring-to-front">
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Dog</button>
    </div>
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Cat</button>
    </div>
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Lion</button>
    </div>
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Shark</button>
    </div>
  </div>
    <div class="shift-selection-button-wrapper bring-to-front">
      <button class="button">AA</button>
      <button class="button">BB</button>
      <button class="button">CC</button>
  </div>
      <div class="shift-selection-button-wrapper bring-to-front" id="shift-selection-button-wrapper-time">
      <div class="shift-selection-shift-time-badge-wrapper">
        <button class="button">1pm</button>
      </div>
        <div class="shift-selection-shift-time-badge-wrapper">
          <button class="button">11am</button>
        </div>
              <div class="shift-selection-shift-time-badge-wrapper">
          <button class="button">5am</button>
        </div>
  </div>
  <div class="shift-selection-button-wrapper bring-to-front">
    <a class="shift-selection-checkmark-wrapper">
      <button class="button">Go!</button>
    </a>
  </div>

  
</div>

CSS

.shift-selection-button-wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  height: 100%;
  width: 50%;
}

.shift-selection-container {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
  margin-top: var(--height-header-line);
  overflow: scroll;
}

.shift-selection-checkmark-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#shift-selection-button-wrapper-time {
  justify-content: center;
}

.shift-selection-shift-time-badge-wrapper {
  position: relative;
}

.shift-selection-shift-time-badge {
  top: -6px;
  position: absolute;
  right: -5px;
  height: 25px;
  width: 25px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: white;
  font-weight: bold;
  border-color: white;
  border-style: solid;
  border-width: 1px;
}

.shift-selection-button-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.shift-seletion-sepcial-shift {
  padding: var(--padding-bottom-top-text-box) var(--padding-bottom-top-text-box);
  background-color: var(--background-color-text);
  border-radius: var(--border-radius-text-box);
}