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 () {
    var number = 2000,
        res = document.querySelector('.res'),
        subtract = document.querySelector('.minus'),
        add = document.querySelector('.plus');

    subtract.addEventListener('click', minus);
    add.addEventListener('click', plus);

    setValue();

    function setValue() {
        res.innerHTML = number;
    }

    function minus() {
        number -= 500;
        setValue();
    }

    function plus() {
        number += 500;
        setValue();
    }
})();