JSFiddle - React, Tailwind, and code Playground

by ChrisWong

HTML

<input type="number" class="hide-number-input" required>
<input type="text" class="show-text-input">

CSS

.hide-number-input {
  opacity: 0;
  z-index: 2;
  /* remove the following comment and hide the vertical bar */
  position: absolute;
}

.show-text-input {
  opacity: 1;
  z-index: 1;
  position: relative
}