JSFiddle - React, Tailwind, and code Playground

HTML

<div class='default'>
    <input placeholder='default'/>
    <input placeholder='default'/>
    <input placeholder='default'/>
</div>

<div class='other'>
    <input placeholder='other'/>
    <input placeholder='other'/>
    <input placeholder='other'/>
</div>

CSS

.default ::-webkit-input-placeholder { font-size: 16pt; color: #555; }
.default ::-moz-placeholder { font-size: 16pt; color: #555; }
.default :-ms-input-placeholder { font-size: 16pt; color: #555; }
.default input:-moz-placeholder { font-size: 16pt; color: #555; }

.other ::-webkit-input-placeholder { font-size: 12pt; color: red; }
.other ::-moz-placeholder { font-size: 12pt; color: red; }
.other :-ms-input-placeholder { font-size: 12pt; color: red; }
.other input:-moz-placeholder { font-size: 12pt; color: red; }