JSFiddle - React, Tailwind, and code Playground

HTML

<div class="counter">
  <button class="btn">
                <span
                class="btn-text">-</span>
            </button>
  <div class="btn-div"><button class="btn"><span class="btn-text">+</span></button></div>
</div>

CSS

.counter {
  display: flex;
  margin-top: 10pt;
  background-color: #444444;
  justify-content: space-around;
  align-items: center;
  border-radius: 60pt;
  width: 100%;
  padding: 5pt;
}

button {
  outline: none;
}

.btn {
  background-color: #222222;
  border-radius: 50%;
  border: 1pt solid white;
  width: 50pt;
  height: 50pt;
}

.btn-text {
  color: white;
  font-size: 14pt;
  text-align: center;
}

.btn:active {
  background-color: #444444;
}