JSFiddle - React, Tailwind, and code Playground

HTML

<div class="numeric-selector">
  <a class="minus"><i class="material-icons">-</i></a>
  <input type="number" class="numeric-input" min="0" max="9" readonly value="0">
  <a class="plus"><i class="material-icons">+</i></a>
</div>

CSS

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.numeric-selector {
	position: relative;
    display: inline-block;
	font-size: 0;
	padding: 2px 0;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.numeric-selector a {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 24px;
    height: 24px;
    color: #e0e0e0;
}
.numeric-selector a i {
	font-size: 22px;
}
.numeric-selector a.minus {
	border-radius: 2px 0 0 2px;
	border: 1px solid #e0e0e0;
}
.numeric-selector a.minus:hover {
	border: 1px solid #ef9a9a;
	color: #ef9a9a;
}
.numeric-selector a.minus.disabled:hover {
	border-radius: 2px 0 0 2px;
	border: 1px solid #e0e0e0;
	color: #e0e0e0;
	cursor: default;
}
.numeric-selector a.plus {
	border: 1px solid #e0e0e0;
	border-radius: 0 2px 2px 0;
}
.numeric-selector a.plus:hover {
	border: 1px solid #8bc34a;
	color: #8bc34a;
}
.numeric-selector a.plus.disabled:hover {
	border: 1px solid #e0e0e0;
	border-radius: 0 2px 2px 0;
	color: #e0e0e0;
	cursor: default;
}
.numeric-selector input {
    position: relative;
    display: inline-block;
	outline: 0;
	width: 22px;
	height: 22px;
	font-size: 14px;
    text-align: center;
	border-left: 0;
	border-right: 0;
    border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
    margin-top: -16px;
    vertical-align: middle;
	z-index: 1;
}