<div class="wrapper">
  <h1 contenteditable aria-label="I'm an editable empty h1!"></h1>
 
  <div contenteditable aria-label="And I'm an empty div"></div>
  
  <h2 contenteditable aria-label="Subtitle">I'm an editable h2. Try deleting me.</h2>
 
  <div contenteditable aria-label="Content">And I'm an editable div with some space ipsum. The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space</div>
</div>

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 30px;
  background: #F3F6F8;
  line-height: 1.5;
}

.wrapper {
  max-width: 700px;
  margin: 0 auto;
}

[contenteditable] {
  margin: 5px;
  padding: 30px;
  outline: 0;
  
  &:empty {
    box-shadow: inset 0 0 0 1px #E9EFF3;
    background: #fff;

    &:before {
      content: attr(aria-label) ;
      color: #C8D7E1;
    }
  }
  &:focus {
    box-shadow: inset 0 0 0 2px #0085BE;
    background: #fff;
  }
}