JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ui-input">
        <input name="lastname" type="text" id="lastname" placeholder="Last Name">
        <span class="ui-icon-delete"></span>
    </div>

CSS

input{
            width:86%;
            padding: 7px 0 7px 5px;
            line-height: 1.4;
            font-size: 14px;
            border:none;
            outline: 0 !important;
            margin-left:5px;
        }
     
        .ui-input{
 
            position: relative;
   
            width:46%;
        }
  
        .ui-icon-delete{
            padding: 0;
            margin: 0;
            background: rgba(0, 0, 0, 0.398438) url(icons-18-white.png) -72px 50%;
            background-position: -72px 50%;
            background-size: 776px 18px;
            display:none;
            float:right;
            border:solid #fff 2px;
            width:18px;
            height :18px;
            position:relative;
            top:8px;
            right:8px;
            border-radius:20px;
            box-shadow:  0px 0px 3px 2px rgba(000, 000, 000, 0.2);
            cursor:pointer;
        }

JavaScript

$(function(){
    $("input").focus(function(){
        $(this).parent().addClass("ui-focus");
        $(this).parent().find(".ui-icon-delete").show();
    });
    $("input").blur(function(){
        $(this).parent().removeClass("ui-focus");
    });
 
    $(".ui-icon-delete").click(function(){
        $(this).parent().find("input").val("");
        $(this).hide();
    });
});