JSFiddle - React, Tailwind, and code Playground

HTML

<form action='#'>
             <div class="city"><input type="text" class="input__shipping" placeholder="Bangladesh"> </div>
            <div class="city"> <input type="text" class="input__shipping" placeholder="State"> </div>
            <div class="city"> <input type="text" class="input__shipping" placeholder="Postcode / Zip"> </div>
            <button class="button__shipping">GET A QUOTE </button>
</form>

CSS

.input__shipping {

    width: 358px;
    height: 44px;
    border: 1px solid #A4A4A4;
    font-family: Lato;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 16px;
    padding-left: 16px;

}


input.input__shipping::placeholder {
    color: #222222;

}


.input__shipping:focus {
    outline: none;
}

:focus::-webkit-input-placeholder {
    color: #B1B1B1;
}