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;
    visibility: hidden;
}

.show {
    left: -18px;
    visibility: visible;
}

JavaScript

function checkInput(text) {
    if (text) {
        $("#clearBtn1").addClass("show");
    } else {
        $("#clearBtn1").removeClass("show");
    }
}