JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Arthur Nunes - sd-07 - Todo List</title>
    <link rel="stylesheet" href="bulma.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <section class="section has-text-centered">
      <header>
        <h1 class="title">Minha Lista de Tarefas</h1>
        <p class="subtitle" id="funcionamento">
          Clique duas vezes em um item para marcá-lo como completo
        </p>
      </header>
    </section>
    <section class="section">
      <main>
        <div class="container">
          <div class="field">
            <label class="label" for="texto-tarefa"
              >Digite a tarefa a ser adicionada:</label
            >
            <div class="control">
              <input
                class="input is-primary is-rounded"
                type="text"
                name="texto-tarefa"
                id="texto-tarefa"
              />
            </div>
          </div>
        </div>
        <br />
        <div class="container">
          <ol id="lista-tarefas"></ol>
        </div>
        <br />
        <div class="container">
          <div class="field">
            <div class="buttons is-centered">
              <div class="control">
                <button
                  class="button is-primary is-rounded is-light"
                  id="criar-tarefa"
                >
                  Criar Tarefa
                </button>
              </div>
              <div class="control">
                <button
                  class="button is-warning is-rounded is-light"
                  id="remover-finalizados"
                >
                  Remover Finalizados
                </button>
              </div>
              <div class="control">
                <button
                  class="button is-success is-rounded is-light"
                 ...

CSS

body {
  margin: auto;
  max-width: 1000px;
  width: 100%;
}

.selected {
  background-color: rgb(128, 128, 128);
}

.completed {
  text-decoration: line-through solid rgb(0, 0, 0);
}

JavaScript

// ADICIONA UM NOVO ITEM
$("#criar-tarefa").click(function () {
  if ($("#texto-tarefa").val() === "") {
    alert("Você deve digitar algo para ser adicionado a lista!");
  } else {
    $("#lista-tarefas").append(
      `<li class="item-lista">${$("#texto-tarefa").val()}</li>`
    );
    $("#texto-tarefa").val("");
  }
});

$("#lista-tarefas").on("click", "li", function () {
  $("li").addClass("selected");
});

// REMOVE OS FINALIZADOS
$("#remover-finalizados").click(function () {
  $(".completed").remove();
});

// TODO: SALVAR TAREFAS WEBSTORAGE
// $('#salvar-tarefas').click(function () {
// });

// REMOVE OS SELECIONADOS
$("#remover-selecionado").click(function () {
  $(".selected").remove();
});

// APAGA TUDO
$("#apaga-tudo").click(function () {
  $("#lista-tarefas").empty();
});