JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<input type="number" min=0 max="24" class="mod"/>

CSS

*{
  box-sizing: border-box;
}
input{
  position: relative;
  margin: 0 0 1rem;
  width: 100px;
  line-height:30px;
  padding-left: 25px;
  font-size: 16px;
  border: 1px solid;
}

input[type="number"].mod::-webkit-outer-spin-button, 
input[type="number"].mod::-webkit-inner-spin-button {
    -webkit-appearance: none;
    background: #FFF url(https://i.postimg.cc/0QdNp4sJ/sort-arrows-couple-pointing-up-and-down.png) no-repeat center center;
    width: 50px;
    border: 1px solid #BBB;
    opacity: 1; /* shows Spin Buttons per default (Chrome >= 39) */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}