JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <section class="main_table">
        <div class="header">
            <div class="header_wrapper">
                <h1 class="header_name">Stocks Table</h1>
                <button type="button" class="btn btn-primary header_btn"><i class="bi bi-file-earmark-plus"></i> Add</button>
            </div>
        </div>
        <table class="table">
            <thead>
              <tr>
                <th class="table_item" scope="col">#</th>
                <th class="table_item" scope="col">Name</th>
                <th class="table_item" scope="col">Date</th>
                <th class="table_item" scope="col">Price</th>
              </tr>
            </thead>
            <tbody id="tableBody">
            </tbody>
        </table>
    </section>
    <section class="chart">
      <canvas id="myChart" width="1200px" height="800px"></canvas>
    </section>
    <div class="modal" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">New stock</h5>
              <button type="button" class="btn-close" data-modal_close aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <input type="text" class="modal_input" placeholder="Tesla" id="name">
            ...

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic-ext);
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Roboto, sans-serif;
}
a {
    text-decoration: none;  
}
.bi-file-earmark-plus{
    color: white;
}
.table_item{
    text-align: center;
}

body{
    background-color: #e6e6e6 !important;
    position: relative;
    padding: 20px;
}
/* Header */
.header{
    width: 80%;
}
.header_name{
    font-size: 36px;
    margin: 0;
}
.header_wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Table */
.main_table{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}
.table{
    margin: 0;
    margin-top: 20px;
    background-color: white;
    border-radius: 5px;
    width: 80% !important;  
}

/* Modal */

.modal{
    overflow: visible;
}
.modal-dialog{
    position: relative;
    top: 40%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}
.modal-body{
    display: flex !important;
    flex-direction: column !important;
    min-height: 200px;
    justify-content: space-between;
    align-items: center
}
.modal_input{
    margin-top: 20px;
    width: 80%;
    padding: 10px;
}
.modal_input:nth-child(1){
    margin-top: 0;
}
.show{
    display: block !important;
}
.chart{
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
canvas{
    margin: 0 auto;
}

JavaScript

document.querySelector('.header_btn').addEventListener('click', () => {
    document.querySelector('.modal').classList.toggle('show');
});
const modalClose = (modalS) => {
    const modal = document.querySelector(modalS);
    modal.classList.toggle('show');
    document.body.style.overflow = '';
};
document.querySelector('.modal').addEventListener('click', (e) => {
    if (e.target === document.querySelector('.modal') || e.target.getAttribute('data-modal_close') === "") {
        modalClose('.modal');
    }
})

const table = new Array;
class tableItem{
    constructor(name, date, price){
        this.index = 0;
        this.name = name;
        this.data = [{
            date : date,
            price : price
        }]
    }
    render(parent){
        parent.innerHTML += `<tr>
        <th class="table_item" scope="row">3</th>
        <td class="table_item" contenteditable="true">${this.name}</td>
        <td class="table_item" contenteditable="true">${this.data[this.index - 1].date}</td>
        <td class="table_item" contenteditable="true">${this.data[this.index - 1].price}</td>
      </tr>`;
    }
}
table[0] = {
    name: 'tesla',
    price: '500',
    date: "2015-05-12"
}
table[1] = {
    name: 'Gasprom',
    price: '1000',
    date: "2010-05-12"
}
var ctx = document.getElementById('myChart');
var chart = new Chart(ctx, {
    type: 'line',
    options: {
        responsive: true,
        title: {
            display: true,
            text: "Chart.js Time Scale"
        },
        scales: {
            xAxes: {
                type: "time",
                time: {
                    parser: 'DD/MM/YYYY',
                    tooltipFormat: 'll'
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Date'
                }
            },
            yAxes: {
                scaleLabel: {
                    display: true,
                    labelString: 'value'
                }
            }
   ...