JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<div>
<p>Testing McTester</p>
<span></span>
</div>

<input type="text" value="Testing McTester">

CSS

div {
    width: 300px;
    height: 100px;
    background: #ddd;
    margin-bottom: 80px;
}

body {
    margin: 100px;
}

span {
    display: block;
    height: 25px;
    width: 25px;
    background: green;
}
span:hover {
    cursor: pointer;
}
p {
    outline: 0;
    display: inline-block;
    padding: 10px;
}
input {
    margin: 10px;
}
.boom {
    background: #ccc;
}

JavaScript

$('span').click(function() {
    _value = $('p').text();  
    
    if (!$('p').siblings('input').length > 0) {
        $('p').before('<input type="text" value="'+_value+'" class="fff">');
        $('p').remove();
        $('.fff').focus();
    }


});


$('input').click(function() {
    this.select();
});

$('p').on('click',function() {
    $(this).attr("onclick","document.execCommand('selectAll',false,null)");
    
});