<div class="frame">
  <div class="center">
    <section class="todo-cmp">
      <header class="todo-cmp__header">
        <h2>Friday</h2>
        <p>March 4, 2016</p>
      </header>

        <ul class="todo-cmp__list">
          <li>
            <label for="todo-01">
              <input id="todo-01" type="checkbox">
              <span>Open template</span>
            </label>
          </li>
          <li>
            <label for="todo-02">
              <input id="todo-02" type="checkbox">
              <span>Build a to-do list</span>
            </label>
          </li>
            <li>
            <label for="todo-03">
              <input id="todo-03" type="checkbox">
              <span>Write something</span>
            </label>
          </li>
          <li>
            <label for="todo-04">
              <input id="todo-04" type="checkbox">
              <span>Complete the task</span>
            </label>
          </li>
      </ul>
    </section>
  </div>
</div>

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
  overflow: hidden;
  color: #333;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  
  /*
  http://colorzilla.com/gradient-editor */
background: rgb(253,162,49);
background: -moz-linear-gradient(45deg, rgba(253,162,49,1) 0%, rgba(251,183,49,1) 60%, rgba(253,202,49,1) 100%);
background: -webkit-linear-gradient(45deg, rgba(253,162,49,1) 0%,rgba(251,183,49,1) 60%,rgba(253,202,49,1) 100%);
background: linear-gradient(45deg, rgba(253,162,49,1) 0%,rgba(251,183,49,1) 60%,rgba(253,202,49,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fda231', endColorstr='#fdca31',GradientType=1 ); 
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.todo-cmp {
  background: #ffffff;
  color: #497081;
  padding: 10px 30px;
  border-radius: 5px;
  box-shadow: 2px 2px 14px rgba(0,0,0,0.15);
  width: 180px;
  
  &__header {
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    
    
    h2 {
      font-weight: 600;
      font-size: 1.2rem;
      margin: 4px auto;
      padding: 0;
    }
    p {
      padding: 0 0 5px;
      margin: 4px auto;
      font-size: 0.8rem;
    }
  }
  
  &__list {
    list-style: none;
    padding: 0;
    
    li {
      padding: 10px 0 15px;
      margin: 0;
      text-align: left;
      width: 100%;
      
      label {
        cursor: pointer;
        font-size: 0.82rem;
        width: 100%;
        display: block;
        
        
        input {
          float: right;
          opacity: 0;
        }
        
        span {
          position: relative;
          display:block;
          transition: all 550ms ease-in-out;
        }
        
        
        input + span::after {
            content: "";
            display: block;
            border: 1px solid #497081;
            border-radius: 13px;
            height: 13px;
            width: 13px;
            position: absolute;
            right: 0;
            top: 1px;
            z-index: 10;
          
           transition: all 550ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
           transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
          /* https://matthewlein.com/tools/ceaser */
        }
        
        input + span::before {
            content: "✔";
            display: block;
            font-size: 22px;
            height: 13px;
            width: 13px;
            position: absolute;
            right: -2px;
            top: -8px;
            z-index: 10;
            opacity: 0;
        }
        
        input:checked + span {
          color: #ccc;
          transition: all 550ms ease-in-out;
        }
        
        input:checked + span::after {
            opacity: 0;
            height: 17px;
            width: 17px;
            top: -2px;
            right: -2px;
        }
        
        input:checked + span::before {
            opacity: 1;
           transition: all 550ms ease-in-out;
        }
      }
    }
  }
}

// jQuery v3.3.1 is supported