JSFiddle - React, Tailwind, and code Playground

HTML

<div class="controls">
    <div id="minutes">0</div>
    <div class="increase"></div>
    <div class="decrease"></div>
</div>

CSS

.increase{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #000;
    margin: 6px 0 5px 0;
    float: left;
}
.decrease{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #000;
    margin: 0px;
    clear: left;
    float: left;
}
#minutes{
    width: 20px; height: 20px;
    border: 1px solid #000;
    margin-top: 5px;
    float: right;
    margin-left: 5px;
    color: #000;
    text-align: center;
    line-height: 20px;
}
.controls{
    width: 40px;
}

JavaScript

$('.controls .increase').click(function() {
  mins=parseInt($('#minutes').text());
  mins=(mins+1)%60;
  $('#minutes').text(mins);
});
$('.controls .decrease').click(function() {
  mins=parseInt($('#minutes').text());
    mins = (mins+59) %60;

  $('#minutes').text(mins);
});