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;
}
.boom {
    background: #ccc;
}

JavaScript

$('span').click(function() {
    $('p').attr('contentEditable','true');
    $('p').addClass('boom');
    $('p').select();
});
    

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