JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wow-input">
    <input type="text" class="wow" disabled/>
    <span class="detector"></span>
</div>

<div class="wow-input">
    <input type="text" class="wow" disabled/>
    <div class="detector"></div>
</div>

<div class="wow-input">
    <input type="text" class="wow" disabled/>
    <div class="detector"></div>
</div>

<div class="wow-input">
    <input type="text" class="wow" disabled/>
    <div class="detector"></div>
</div>

<div class="wow-input">
    <input type="text" class="wow" disabled/>
    <div class="detector"></div>
</div>

CSS

.wow-input{
    width: 280px;
    height: 37px;
    overflow:  hidden;
    position:  relative;
    background: #87f1ff;
    font-family: "Comic Sans MS", cursive, sans-serif;
    letter-spacing: 1px;
    border-radius: 5px;
    margin-top: 10px;
}

.wow{
    width: 260px;
    height: 21px;
    padding: 6px  10px  10px  10px;
    font-size: 16px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    border: 1px;
    letter-spacing: 1px;
    background: #e3e3e3;
}

.detector {
    width: 280px;
    height: 100%;
    background: #bbbbbb;
    margin: -37px  0px  0px  0px;
    position:  relative;
    line-height: 34px;
    padding: 0px 10px 10px 10px;
    color: #717171;
}

JavaScript

dynamicInput();
function dynamicInput(){
    $('.wow-input').each(function(){
        let wowInput=$(this), input=$(this).find($('input'));
        wowInput.on('click',function(){ wowInput.find($('.detector')).hide(); input.prop('disabled',false).focus(); });
        wowInput.find($('input')).on('focusout',function(){ disableInput(wowInput,input); });
        input.on('keyup',function(e){ (e.keyCode==13)?disableInput(wowInput,input):''; });
    });
    function disableInput(wowInput,input){
        input.prop('disabled',true);
        wowInput.find($('.detector')).show().html(input.val());
    }
}