JSFiddle - React, Tailwind, and code Playground

by jrunning

HTML

<div class="name-editor" contenteditable="true">edit me</div>
<div class="meta">(action) Last Updated 2 months ago</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat:400);

* { font-family: sans-serif; }

.name-editor {
    display: inline-block;
    padding: 2px 3px;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    height: 20px;
    color: #6bb1e1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.name-editor:focus { outline: none; }

.name-editor:hover, .name-editor:focus {
    color: orange;
    background-color: #f7f7f7;
}

.name-editor + .meta {
    display: inline-block;
    font-size: 12px;
    height: 20px;
    vertical-align: bottom;
}

JavaScript

var nameEditor = document.querySelector('.name-editor');

nameEditor.addEventListener('click', function() {
    var range = document.createRange(),
        selection = window.getSelection();

    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
});