JSFiddle - React, Tailwind, and code Playground

by FakieEdits

HTML

<script src="https://kit.fontawesome.com/e9fb9951c2.js"></script>
<script src="https://fonts.googleapis.com/css2?family=Roboto:wght@700&amp;display=swap"></script>
<div class="container">
  <div class="tab stats"> <span class="buy-done">0</span> / <span class="buy-error">0</span> / <span class="buy-total">999</span> </div><button class="tab button" id="start"> <i class="fas fa-play icon"></i>
    <div> Start </div>
  </button>
  <div class="tab tab-delimeter">
    <div class="quantity-input-container"> <button class="quantity-input-controls" id="sub"> <i class="quantity-input-icon fas fa-minus"></i> </button> <input id="quantity" class="quantity-input" type="number" min="1" max="999" step="1" pattern="[0-9]*" value="999" /> <button class="quantity-input-controls" id="add"> <i class="quantity-input-icon fas fa-plus"></i> </button> </div>
  </div><button id="inApp" class="tab button"> <i class="fab fa-app-store-ios icon"></i>
    <div> In app </div>
  </button> <button id="bySeller" class="tab button"> <i class="fas fa-user icon"></i>
    <div> By seller </div>
  </button>
</div>

CSS

.container {
  background-color: #282937;
  width: 95px;
  padding: 12px 0;
  border-radius: 10px;
  position: fixed;
  left: 6px;
  top: 50%;
  z-index: 70;
  margin-top: -158px
}

.tab {
  position: relative;
  overflow: hidden;
  padding: 5px;
  width: 95px;
  height: 95px;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: none;
  background-color: #282937;
  color: #babcd8;
  border-bottom: 2px solid #1f1f27;
  box-sizing: border-box
}

.stats {
  height: 30px;
  text-align: center;
  vertical-align: middle
}

.buy-done {
  color: #23e15d
}

.buy-error {
  color: #e12335
}

.buy-total {
  color: #d9dcfd
}

.button {
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color .3s ease-in-out 0s, border .3s ease-in-out 0s, box-shadow .3s ease-in-out 0s
}

.tab:last-child {
  border: none
}

.tab-delimeter {
  border-bottom-color: #babcd8;
  border-width: 3px
}

.icon {
  font-size: 43px;
  margin-bottom: 6px
}

.button-selected {
  color: #c1d8f2;
  background-color: #2c5cb2
}

.button-selected:active:enabled,
.button-selected:focus:disabled,
.button-selected:focus:enabled,
.button-selected:hover:enabled {
  color: #c1d8f2 !important;
  background-color: #2c5cb2 !important
}

.button:hover:enabled {
  background-color: #3a455a;
  color: #d4d5f0
}

.button:focus:disabled,
.button:focus:enabled {
  background-color: #3a455a;
  color: #d4d5f0;
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(48, 119, 255, .8)
}

.button:active:enabled {
  background-color: #202130;
  color: #999bb6
}

.quantity-input-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row
}

.quantity-input {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #babcd8;
  color: #babcd8;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 14px;
  width: 4ch;
  text-align: center
}

.quantity-input:focus {
  outline:...

JavaScript

function onClickAdd() {
  if (+document.getElementById("quantity").value + 1 < 1000) {
    document.getElementById("quantity").value = +document.getElementById("quantity").value + 1;
  }
}

function onClickSub() {
  if (+document.getElementById("quantity").value - 1 > 0) {
    document.getElementById("quantity").value = +document.getElementById("quantity").value - 1;
  }
}

function onSelectInApp(el) {
	const bySeller = document.getElementById("bySeller");
  bySeller.disabled = false;
  bySeller.className = bySeller.className.replace(' button-selected', '');
  
	el.className = el.className + ' button-selected';
  el.disabled = true;
}

function onSelectBySeller(el) {
	const inApp = document.getElementById("inApp");
  inApp.disabled = false;
  inApp.className = inApp.className.replace(' button-selected', '');

	el.className = el.className + ' button-selected';
  el.disabled = true;
}

let start = false;

function onStart(el) {
console.log(start);
	if (start) {
  	el.className = el.className.replace(' button-selected', '');
    start = false;
  } else {
    el.className = el.className + ' button-selected';
    start = true;
  }
}