JSFiddle - React, Tailwind, and code Playground

Editable components

by tonytlwu

HTML

<div class="editable editable-inline">
  <img src="https://placehold.it/450x240" />
</div>
<br />
<div class="editable editable-inline">
  <button>Button</button>
</div>
<div class="editable editable-block">
  <form>
    <p>
      <input type="text" />
    </p>
    <p>
      <label>
        <input type="checkbox" /> Lorem ipsum</label>
      <br>
      <label>
        <input type="checkbox" /> Lorem ipsum</label>
      <br>
      <label>
        <input type="checkbox" /> Lorem ipsum</label>
    </p>
    <p>
      <input type="submit" value="Submit" />
    </p>
  </form>
</div>

CSS

.editable {
  position: relative;
  margin: 0;
  padding: 0;
}

.editable-inline {
  display: inline-block;
}

.editable-block {
  display: block;
}

.editable > .editable-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: rgba(0, 171, 209, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  opacity: 0;
  transition: all 64ms ease-out;
  cursor: pointer;
}

.editable:hover > .editable-overlay {
  opacity: 1;
}

JavaScript

var editables = document.querySelectorAll('.editable');
var editable;
var overlay = document.createElement('div');
overlay.classList.add('editable-overlay');
overlay.innerHTML = 'Click to configure';

for (var i = 0, l = editables.length; i < l; i++) {
  editable = editables[i];
  editable.appendChild(overlay.cloneNode(true));
}