JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="btn" disabled="true"></div>
<div class="btn" disabled=true></div>
<div class="btn" disabled="false"></div>
<div class="btn" disabled="false"></div>
<div class="btn" disabled></div>
<div class="btn"></div>

CSS

.btn {
	background-color: red;
	padding: 1em;
	margin-bottom: 1em;
}

.btn.is-disabled,
.btn[disabled]:not([disabled='false']) {
			    cursor: not-allowed;
			    -webkit-filter: grayscale(.25);
			    -moz-filter: grayscale(.25);
			    -o-filter: grayscale(.25);
			    filter: grayscale(.25);
			    opacity: .4;
			}