JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Shop">
    <div class="add-product">
        <h1>Add product</h1>
        <form id="addForm">
            <label for="name" >Name of product</label>
            <input type="text"  id="name" class="input-product">
            <label for="price">Price of product</label>
            <input type="text"  id="price" class="input-product">
            <label for="count">Count of product</label>
            <input type="text"  id="count" class="input-product">
            <button id="add">Add</button>
        </form>
    </div>
<div class="product-table">
    <h2>Products</h2>
    <form id="delete-form">
        <label for="name-delete">Delete product by name</label>
        <input type="text" id="name-delete" class="input-delete">
        <button id="delete" type="button">Delete</button>
    </form>
    <table id="shop">
        <caption>Products that are available in the store</caption>
        <tr>
            <th>Name:</th>
            <th id="filter">Price:</th>
            <th>Count:</th>
        </tr>
    </table>
</div>
</div>

CSS

body {
    margin:25px;
    background-color: #b5b7a8;
    color: #484a4f;
}
.add-product {
    float: left;
    width: 30%;

}
form {
    margin-top:3%;
}
h1 {
    font-size:26px;
    color: #36444f;
}
label {
    font-size:14px;
    color: #36444f;
}
.input-product {
    border-radius: 5%;
    display: block;
    margin:10px;
    padding:3px 0 3px 5px;
    font-size:16px;
    outline: none;
    width: 50%;
}
#add {
    border-radius: 5%;
    margin:5% 0 0 20%;
    background: #319e0f;
    outline: none;
    border: none;
    cursor: pointer;
    color: aliceblue;
    padding: 3px 6px 3px 6px;
    font-size:12px;
    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
}#add:hover {
     box-shadow: 0 0 0 4px #fff4f0;
     transition: background 0.2s, color 0.2s;
 }
.product-table {
    float: right;
    width: 70%;

}
h2  {
    text-align: center;
    font-size:26px;
    color: #36444f;
}
.input-delete {
    border-radius: 5%;
    width: 30%;
    margin:10px;
    padding:3px 0 3px 5px;
    font-size:16px;
    outline: none;
}
#delete {
    border-radius: 5%;
    background: #cb131b;
    outline: none;
    border: none;
    cursor: pointer;
    color: aliceblue;
    padding: 3px 6px 3px 6px;
    font-size:12px;
}#delete:hover {
     box-shadow: 0 0 0 4px #fff4f0;
     transition: background 0.2s, color 0.2s;
 }
 #delete-form {
     margin-bottom:5%;
 }
table {
    border: 1px solid;
    text-align: center;
    margin:0 auto;
    width: 55%;
    border-collapse: collapse;
    color: #36444f;
}
td,th {
    border: 1px solid;
    padding:5px;
}
th{
    font-size:14px;
}
td {
    font-size:12px;
}
caption {
    font-size:18px;
    color: #36444f;
    font-weight:600;
    margin-bottom:10px;
}
#total-price {
    text-align: left;
    font-weight:600;
    font-size:20px;
}
#filter {
    cursor: pointer;
}

JavaScript

//Product Creation Class
class Product {
    constructor(name, count, price) {
        this.name = name;
        this.count = count;
        this.price = price;
    }
}
Product.SORT_ORDER_ASC = 1;
Product.SORT_ORDER_DESC = -1;
// Сlass where products are recorded
class Shop {
    constructor() {
        this.products = [];
    }

    //method for adding a product
    addProduct(newProduct) {
        this.products.push(newProduct);
    }

    //method for remove product by name
    deleteProductByName(productName) {
        let i = this.products.length;
        while (i--) {
            if (productName === this.products[i].name) {
                this.products.splice(i, 1);
            }
        }
    }

    // get total price by all products
    get totalProductsPrice() {
        return this.products.map(product => product.price).reduce((p, c) => p + c);
    }

    //method for sorting the product at its price
    sortProductsByPrice(sortOrder) {
        const sorted = this.products.sort((a, b) => {
            return a.price > b.price ? sortOrder : -sortOrder;
        });
        this.products = sorted;
    }

    // method to draw the table with product property (
    // name, count, price)
    show() {
        const rows = document.querySelectorAll("#shop .data");
        for (let i = rows.length - 1; i >= 0; i--) {
            const e = rows.item(i);
            e.parentNode.removeChild(e);
        }
        const table = document.getElementById("shop");
        const tFoot = table.querySelector('tfoot');
        if (tFoot) tFoot.remove();

        for (let i = 0; i < this.products.length; i++) {
            //create table
            table.innerHTML += `<tbody><tr class="data"><td>${this.products[i].name}</td>
    <td>${this.products[i].price}</td>
    <td>${this.products[i].count}</td></tr></tbody>`;
        }
        //show total price by all products
        table.innerHTML += `<tfoot><tr><td colspan="3" id="total-price">Total price: 
       ...