JSFiddle - React, Tailwind, and code Playground
HTML
<form action="#" method="post">
<fieldset>
<input type="reset" />
</fieldset>
<fieldset>
<input type="reset" id="resetButtonID" />
</fieldset>
<fieldset>
<input type="reset" class="resetButtonClass-Name" />
</fieldset>
</form>
CSS
fieldset {
width: 50%;
padding: 0.5em;
border: 1px solid #ccc;
border-radius: 1em 0;
margin: 0 auto 1em auto;
}
input[type=reset], /* CSS3 attribute-equals selector */
#resetButtonID,
.resetButtonClass-Name {
color: red;
}
input[type=reset]:hover,
#resetButtonID:hover,
.resetButtonClass-Name:hover {
color: blue;
}
input[type=reset]:active,
#resetButtonID:active,
.resetButtonClass-Name:active {
color: green;
}
input[type=reset]:focus,
#resetButtonID:focus,
.resetButtonClass-Name:focus {
/* the reset button when focussed by keyboard-navigation */
color: #f90;
}