JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>



</head>
<body>

<form action="demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" autofocus autocorrect="off"/><br/>
Postal Code2: <input type="number" name="user_postal_code" placeholder="#####"size="5" class="postal-code"/><br />
Phone: <input type="tel" name="user_phone" placeholder="###-###-####"/><br />
<input type="submit" />
</form>

</body>
</html>

CSS

input::-o-outer-spin-button,
input::-o-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -o-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input::-moz-outer-spin-button,
input::-moz-inner-spin-button {border:10px red;
    /* display: none; <- Crashes Chrome on hover */
    -moz-transform: scale(10);
    margin: 10px; /* <-- Apparently some margin are still there even though it's hidden */
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=tel]
{
    width:90px;   
}

input.postal-code
{
    width:60px;   
}