JSFiddle - React, Tailwind, and code Playground

HTML

<input id="input1" type="text" placeholder="mumbo jumbo 1 (ios will zoom)">
<input id="input2" type="text" placeholder="mumbo jumbo 2">
<input id="input3" type="text" placeholder="mumbo jumbo 3">
<input id="input4" type="text" placeholder="mumbo jumbo 4">

CSS

input {
    display: block;
    margin: 20px;
    width: 400px;
}

#input1 {
    font-size:18px;
}

#input2 {
    font-size:16px;
}

#input3 {
    font-size:15px;
}

#input4 {
    font-size:14px;
}