<h1>To-do</h1>
<h2>To tick off an item, select its text and press <b>ctrl+B</b> (Windows) or <b>cmd+B</b> (Mac)</h2><br />
<div contenteditable>
  <div>
    Finish the codepen you started
  </div>
  <div>
    Drink more coffee
  </div>
</div>
body {
  font-family: sans-serif;
  font-family: "Quicksand", sans-serif;
  color: #333;
  text-indent: 1.5em;
  font-size: 1.1em;
  background-color: #eee;
  width: 96vw;
  max-width: 600px;
  margin: 0 auto;
}
h2 {
  padding: 0 2em;
  text-indent: 0;
  opacity: 0.7;
  font-size: 0.84em;
  font-weight: normal;
}
span b {
  color: #000;
}
h1 {
  font-size: 3em;
  margin-bottom: 0.2em;
  color: deeppink;
}
div {
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}
div:focus {
  outline: none;
}
div div {
  position: relative;
  background-color: deeppink;
  color: #fff;
  margin: 16px;
  border-radius: 999px;
  line-height: 3em;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
div b {
  text-decoration: line-through;
  font-weight: normal;
  display: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.