JSFiddle - React, Tailwind, and code Playground
by chad
HTML
<div class="box">
<input type="text" value="enabled">
<input disabled type="text" value="disabled">
<br>
<input type="checkbox">
<input disabled type="checkbox">
<input checked type="checkbox">
<input checked disabled type="checkbox">
<input type="radio">
<input disabled type="radio">
<input checked type="radio">
<input checked disabled type="radio">
<label><input type="checkbox"> label</label>
<label><input disabled type="checkbox"> label</label>
<br>
<button>enabled</button>
<button disabled>disabled</button>
</div>
<div class="box color">
<input type="text" value="enabled">
<input disabled type="text" value="disabled">
<br>
<input type="checkbox">
<input disabled type="checkbox">
<input checked type="checkbox">
<input checked disabled type="checkbox">
<input type="radio">
<input disabled type="radio">
<input checked type="radio">
<input checked disabled type="radio">
<label><input type="checkbox"> label</label>
<label><input disabled type="checkbox"> label</label>
<br>
<button>enabled</button>
<button disabled>disabled</button>
</div>
<form>
<fieldset class="box" disabled>
<p>This is a disabled fieldset</p>
<input type="text" value="enabled">
<input disabled type="text" value="disabled">
<br>
<input type="checkbox">
<input disabled type="checkbox">
<input checked type="checkbox">
<input checked disabled type="checkbox">
<input type="radio">
<input disabled type="radio">
<input checked type="radio">
<input checked disabled type="radio">
<label><input type="checkbox"> label</label>
<label><input disabled type="checkbox"> label</label>
<br>
<button>enabled</button>
<button disabled>disabled</button>
</fieldset>
</form>
CSS
.box {
margin: 0;
padding: 20px 10px;
}
.color {
background: #0282b1;
}