JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="row">

    <div class="plus">+</div>
    <div class="res"></div>
    <div class="minus">-</div>
    <div class="bord"></div>
  </div>

</div>

CSS

.row>div {
  display: inline-block;
  margin-top: 30%;
  cursor: pointer;
  padding-left: 20px;
}

.row {
  width: 200px;
  margin: 10% 24%;
  height: 200px;
}

.plus:hover,
.minus:hover {
  transform: scale(1.1);
}

.plus:focus,
.minus:focus {
  transform: scale(1.0);
}

.plus:active,
.minus:active {
  transform: scale(1.0);
}

.plus,
.minus {
  width: 10px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  position: relative;
  left: 0;
  display: inline-block;
  box-shadow: 7px 5px 15px -5px rgba(0, 0, 0, 0.7);
}

.plus {
  background: #f50057;
  font-size: 25px;
}

.minus {
  background: #00e676;
  font-size: 25px;
}

body {
  background: #00b0ff;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bord {
  height 6%;
  width: 93%;
  border-top: 1px solid #dfdfdf;
  position: absolute;
  left: 0px;
  bottom: 0;
  top: 50px;
}

.container {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4);
  display: block;
  margin: 10% 24%;
  width: 300px;
  height: 200px;
  background: #fafafa;
  position: relative;
}

JavaScript

(function () {
    "use strict";
    
    class Buy {
        constuctor(number = 2000) {            
            this.res = document.querySelector('.res');
            document.querySelector('.minus').addEventListener('click', () => this.minus());
            document.querySelector('.plus').addEventListener('click', () => this.plus());
            
            this.number = number;
        }

        set number(number) {
            this._number = number;
            this.res.innerHTML = number;
        }

        get number() {
            return this._number;
        }

        minus() {
            this.number -= 500;
        }

        plus() {
            this.number += 500;
        }
    }

    new Buy(5000);
})();