JSFiddle - React, Tailwind, and code Playground

by Josh Shields

HTML

<input class="edit-box" type="text" value="Foo" placeholder="Bar">

CSS

/* input that looks like a span until clicked*/
.edit-box {
    border: none;
    box-shadow: none;
    background: none;
    font-weight: bold;
    color: #000;
}
.edit-box:hover {
    cursor: pointer;
}
.edit-box:focus {
    cursor:text;
    border: 1px solid black;
    background: #fff;
    font-weight: normal;
    color: #000;
}