JSFiddle - React, Tailwind, and code Playground

HTML

<span id="thingy" class="field">Text field one</span><br />

<span id="thingy" class="field">Text field two</span><br />

<span id="thingy" class="field">Text field three</span><br />

JavaScript

$(document).ready(function() {
    $(".field").css('cursor', 'pointer')

    .click(function() {
        var element = $(this);
        element.css({cursor: 'auto',display: 'inline-block'});
        element.html('<input type="text" size="25" value="' + element.text() + '" style="width:' + element.width() + 'px;height:' + element.height() + 'px;border:none;padding:0px;margin:0px;">');
        element.children('input').focus();

    }).delegate("input", "blur", function() {
        $(this).parent().html(this.value).css('cursor', 'pointer');
    });
});