JSFiddle - React, Tailwind, and code Playground

HTML

<p>This form starts with a value: when hovering over the input or the clear button, it becomes opaque. When you clear the value, it should no longer appear, due to the third CSS rule.</p>
<form>
    <input type="text" value="e" placeholder="search..." name="q" required/>
    <button class="clear" type="button" onclick="this.form['q'].value=''"></button>
</form>
<p>This form starts without a value. When you enter a value, it should then show the clear button when hovering over the field.</p>
<form>
    <input type="text" value="" placeholder="search..." name="q" required/>
    <button class="clear" type="button" onclick="this.form['q'].value=''"></button>
</form>

CSS

.clear {
    opacity: 0;
}
.clear:hover, input:hover + .clear {
    opacity: 1;
}
input:invalid + .clear {
    display: none;
}