JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" onkeyup="checkInput(this.value)" /><span id="clearBtn1" class="clearBtn">X</span>
CSS
.clearBtn {
position: relative;
left: 0;
transition: left 0.3s;
}
.show {
left: -15px;
}
JavaScript
function checkInput(text) {
if (text != null && text != "") {
$("#clearBtn1").addClass("show");
} else if (text == null || text == ""){
$("#clearBtn1").removeClass("show");
}
}