JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>API Web Storage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="Trabalho.css">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

   
</head>
<body>
    <div class="menu">
        <nav class="navbar-expand">
          <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Gastos por categoria</a>
            <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Gastos por dia</a>
          </div>
        </nav>
     </div>
        <div class="tab-content container-fluid" id="nav-tabContent">
          <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <form id="frmCadastro">
                            <div class="form-group">
                                <label for="descricao">Descrição:</label>
                                <input type="text" id="descricao" class="form-control">
                            </div>
                           
                            <div class="form-group">
                                <label for="gasto">Gasto:</label>
                                <input type="number" step="0.010" id="gasto" class="form-control">
                            </div>  

                      ...

CSS

img{
	height: 30px;
	width: 30px;
}
canvas{
		max-height: 100% !important;
		max-width: 100% !important;
	}

@media (max-width: 320px) {
	.menu { 
		width:calc(200% - 15px); 
		font-size: 12px;
	}

	canvas{
		max-height: 100% !important;
		max-width: 100% !important;
	}

}

JavaScript

$(function(){
    var operacao = "A"; //"A"=Adição; "E"=Edição
    var indice_selecionado = -1;
    var tbClientes = localStorage.getItem("tbClientes");// Recupera os dados armazenados
    var datas;
    tbClientes = JSON.parse(tbClientes); // Converte string para objeto

    if(tbClientes == null) // Caso não haja conteúdo, iniciamos um vetor vazio
        tbClientes = [];

    $("gasto").on("change",function(){
        $(this).val(parseFloat($(this).val()).toFixed(2));
    });

    function Adicionar(){
        var data = $("#data").val();
        let split = data.split('-');
        let formated = split[2]+"/"+split[1]+"/"+split[0];

         var cliente = JSON.stringify({
            Descrição: $("#descricao").text(),
            Gasto:     $("#gasto").val(),
            Data:      formated,
            Categoria: $("#categoria").val()
        });
        tbClientes.push(cliente);

        localStorage.setItem("tbClientes", JSON.stringify(tbClientes));

        alert("Registro adicionado.");
        return true;
    }

    function Editar(){
        tbClientes[indice_selecionado] = JSON.stringify({
                Descrição: $("#descricao").val(),
                Gasto:     $("#gasto").val(),
                Data:      $("#data").val(),
                Categoria: $("#categoria").val()
            });
        localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
        alert("Informações editadas.")
        operacao = "A";
        return true;
    }

    function Listar(){
        $("#tblListar").html("");
        $("#tblListar").html(
            "<thead>"+
            "   <tr>"+
            "   <th scope='col'>Descrição</th>"+
            "   <th scope='col'>Gasto</th>"+
            "   <th scope='col'>Data</th>"+
            "   <th scope='col'>Categoria</th>"+
            "   <th scope='col'></th>"+
            "   </tr>"+
            "</thead>"+
            "<tbody>"+
            "</tbody>"
            );
        var...