JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Adapted from https://stackoverflow.com/a/16243163 -->

<div class="donate-now">
  <input type="radio" id="a25" name="amount" checked="checked" />
    <label for="a25" id="a25">$25</label>
  <input type="radio" id="a50" name="amount" />
    <label for="a50" id="a50">$50</label>
  <input type="radio" id="a75" name="amount" />
    <label for="a75" id="a75">$75</label>
  <input type="radio" id="a100" name="amount" />
    <label for="a100" id="a100">$100</label>
  <input type="radio" id="other" name="amount" />
    <label for="other" id="other">other:</label>
  <input type="text" id="otherAmount" name="numAmount" />
</div>

CSS

/* Adapted from https://stackoverflow.com/a/16243163 */

.donate-now label,
.donate-now input {
  text-align: center;
  align-items: center;
  justify-content: center;
  position: absolute;
  display: flex;
  width: 100px;
  height: 50px;
  border: 1px solid #CCC;
  padding: 0;
  cursor: pointer;
}

.donate-now input[type="radio"] {
  display: none;
}

.donate-now label:hover {
  background: #DDD;
}

.donate-now input[type="radio"]:checked + label {
  background: yellow;
}

#a25 {
  top: 20px;
  left: 20px;
}

#a50 {
  top: 20px;
  left: 140px;
}

#a75 {
  top: 20px;
  left: 260px;
}

#a100 {
  top: 20px;
  left: 380px;
}

#other {
  top: 20px;
  left: 500px;
}

#otherAmount {
  top: 20px;
  left: 620px;
}