JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<input type="number" value="1">

<div class="btn">test</div>

<input type="text" value="input text" />

CSS

input[type="number"] {
appearance: textfield;
border: 1px solid rgb(22, 88, 88);
border-radius: 5px;
background-color: aqua;
padding: 1px 3px;

box-shadow:
    -30px 0 40px rgba(255, 0, 0, 0.6),      /* red - left */
    -15px 0 30px rgba(255, 165, 0, 0.6),    /* orange */
     0   0  25px rgba(255, 255, 0, 0.6),    /* yellow - center glow */
     15px 0 30px rgba(0, 255, 0, 0.6),      /* green */
     30px 0 40px rgba(0, 255, 255, 0.6),    /* cyan */
     45px 0 45px rgba(0, 0, 255, 0.6),      /* blue */
     60px 0 50px rgba(148, 0, 211, 0.6);    /* violet */

}
.old {
  box-shadow: 0 0 40px 3px cyan;
}
.btn {
  -moz-appearance: none;
  appearance: none;
}
input[type="text"] {
  background-color: aquamarine;
  appearance: none;
}