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

var number = 0;
 	var res = document.querySelector('.res');
function buybalance(){
	number = 2000;
 
	var min = document.querySelector('.minus');
  res.innerHTML = number;
  min.addEventListener('click', buy);
}

function buy(){
	number -= 500;
	res.innerHTML = number;
}

buybalance();

function plu(){

	var get= document.querySelector('.plus');
	get.addEventListener('click',pluLis); 

};

function pluLis(){
	number += 500;
	res.innerHTML = number;
};

plu();