JSFiddle - React, Tailwind, and code Playground

by Mahmoud Kassem

HTML

<div id="input-outer">
    <input type="text">
    <div id="clear">X</div>
</div>

CSS

body {
    font-family:"Tahoma";
}
#input-outer {
    height:2em;
    width:15em;
    border:1px #e7e7e7 solid;
    border-radius:20px;
}
#input-outer input {
    height:2em;
    width:80%;
    border:0px;
    outline:none;
    margin:0 0 0 10px;
    border-radius:20px;
    color:#666;
}
#clear {
    position:relative;
    float:right;
    height:20px;
    width:20px;
    top:5px;
    right:5px;
    border-radius:20px;
    background:#f1f1f1;
    color:white;
    font-weight:bold;
    text-align:center;
    cursor:pointer;
}
#clear:hover {
    background:#ccc;
}

JavaScript

$('#clear').click(function () {
    $('#input-outer input').val('');
});