JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<div class="wrap">
    <input type="text" id="searchText" />
    <span class="backgroundText">Search</a>
</div>

CSS

.wrap {
    position: relative;
    display: block;
}
.backgroundText {
    position: absolute;
    padding: .2em 0 .2em .4em;
    left: 0;
    font-size: .8em;
}

JavaScript

YUI().use("node","event",function(Y) {
    Y.one("#searchText").on("keyup", function(e) {
        Y.log(this.get("value"));
        if (this.get("value") != "") {
            Y.one(".backgroundText").hide();
        }
        else {
            Y.one(".backgroundText").show();
        }
    });
    
    Y.one("#searchText").on("blur", function(e) {
        if (this.get("value") == "") {
            Y.one(".backgroundText").show();
        }
    });

});