JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>boilerplate</title>
    <link rel="stylesheet" href="css/style.min.css">
  </head>

  <body>
    <sections class="workspace">
      <form class="form" id="form" method="post">
        <textarea class="form__text" name="textarea" rows="2" autofocus placeholder="text"></textarea>
        <button class="form__btn" type="submit">Send</button>
      </form>
      <section class="list" id="list">
      </section>
    </sections>

    <script src="js/script.js"></script>
  </body>
</html>

SCSS

.workspace {
  border: 2px solid rgb(98, 187, 86);
  display: flex;
  flex-direction: column;
}

.form {
  border: 2px solid rgb(73, 46, 46);
  display: flex;
}

.form__text {
  flex-grow: 1;
}

.form__btn {
  flex-shrink: 0;
}

.list {
  border: 2px solid rgb(170, 73, 35);
  display: flex;
  flex-direction: column;
}

.case {
  display: flex;
}

.case--checked {
  background-color: lightcoral;
}

.case__label-check {
  width: 20px;
  height: 20px;
  border: 2px solid green;
}

.case__check {
  &:checked ~ .case__text {
    color: red;
  }
}

.case__text {
  margin: 0;
  padding: 0;
}

.note {
  border: 2px solid rgb(74, 142, 231);
}

JavaScript

const formElem = document.getElementById('form');
const listElem = document.getElementById('list');
const counter = localStorage.getItem('counter');

// Заметки:
const renderCase = (data) => {
  if (!data) return;
  const id = data.id,
        check = data.check,
        text = data.text;

  const caseElem = document.createElement('section');
  caseElem.id = id;
  // Проверим, выполнены ли они и дадим соответствующий класс
  if (check === 'checked') {
    caseElem.className = 'case case--checked'
  } else {
    caseElem.className = 'case'
  }
  caseElem.dataset.check = check;
  caseElem.innerHTML = `
    <label class="case__label-check" for="check-${id}"></label>
    <input class="case__check" type="checkbox" id="check-${id}" ${check}>
    <p class="case__text">${text}</p>
    <button class="case__btn" type="button">Del</button>`;
  
  listElem.append(caseElem);
};

function Case (data) {
  if (!data) return;
  const self = this,
        elem = document.getElementById(data.id);

  const id = data.id;

  this.checked = function (event) {
    const caseElem = event.parentElement,
          data = JSON.parse(localStorage.getItem(id));

    if (event.checked) {
      data.check = 'checked';
      localStorage.setItem(id, JSON.stringify(data) );
      elem.classList.add('case--checked');
    } else {
      data.check = '';
      localStorage.setItem(id, JSON.stringify(data) );
      elem.classList.remove('case--checked');
    }
  };
  this.delete = function (event) {
    localStorage.removeItem(id);
    elem.parentElement.removeChild(elem);
  }

  // Добавим отслеживание клика всей заметке
  elem.addEventListener('click', function(event) {
    let target = event.target;
    // console.log(event.target);
    // Найдем необходимый элемент
    if (target.tagName == 'INPUT') {
      self.checked(target);
    }
    if (target.tagName == 'BUTTON') {
      self.delete(target);
    }
  });
}

// Хранилище
// Если счетчик уже есть, то добавим все записи на страницу, если нет,...