JSFiddle - React, Tailwind, and code Playground

HTML

<h1>In Chromium:</h1>

<input type="text" value="This is black"/>
<input type="text" disabled="disabled" value="Why this is not black?"/>

<input id="green" type="text" value="Green"/>
<input id="green" type="text" disabled="disabled" value="Screwed up Green"/>

<input id="blue" type="text" value="Natural Blue"/>
<input id="blue" type="text" disabled="disabled" value="And, nope, is it our eyes, or Chromium cannot this time screw the colour?"/>

<br/>
<br/>
Isn't this weird?

CSS

input {
    background:white;
    color: black;
    width:100%;
    margin:4px
    
}

input#black {color: black}

input#green {color: green}

input#blue {color: blue}