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="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>TaskBoard</title>
</head>
<body>
    <header>
        <div class="headerWrapper">
            <a href="">TRELLO</a>
        </div>
    </header>
    <div class="main">
        <div class="mainWrapper">
            <div class="createBoard" id="createBlock">
                <div class="mainCreateBoard" id="createBoard">
                    <div class="createBoardHeading" id="createBoardHeading">
                        <p>Создать</p>                       
                    </div>
                    <div class="createBoardForm" id="createForm">
                        <div class="boardWrapper">
                            <div class="boardForm">
                                <form action="">
                                    <label for="name">Введите название доски</label>
                                    <input type="text" name="name" id="createName">
                                </form>
                            </div>
                            <div class="boardSubmit">
                                <div class="boardAdd"><button id="buttonAdd">Добавить</button></div>
                                <div class="boardSubmitClose"> <span class="boardCreateLine"></span> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="myBoards" id="myBoards">
                <div class="mainWrapper">
                    <div class="myBoardsTitle">
             ...

CSS

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

header {
  background-color: #75cfb8;
  padding-top: 20px;
  padding-bottom: 20px;
}

header a {
  color: white;
  font-size: 50px;
  font-weight: bold;
  font-family: "Oswald", sans-serif;
}

.headerWrapper {
  margin: 0 auto;
  width: 1500px;
}

.mainWrapper {
  margin: 0 auto;
  width: 1500px;
}

/* CREATE BOARD */
.createBoard {
  margin-top: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  clear: both;
}

.boardWrapper {
  margin: 0 auto;
  width: 350px;
}

.createBoardHeading {
  z-index: 1;
  background-color: #bbdfc8;
  padding: 10px 150px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer;
}

.createBoardHeading p {
  color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  font-size: 30px;
}

.createBoardForm {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: 1s;
  transition: 1s;
  z-index: 5;
  width: 100%;
  background-color: #F3F3F3;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.createBoardForm label {
  margin-top: 20px;
  font-family: "Oswald", sans-serif;
}

.createBoardForm input {
  margin-top: 10px;
  width: 100%;
  border: 1px solid silver;
  border-radius: 10px;
  height: 30px;
  outline: none;
}

.createBoardForm form {
  padding-top: 20px;
}

.createBoardForm.activeCreate {
  max-height: 100%;
  -webkit-transition: 1s;
  transition: 1s;
}

.boardSubmit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px;
  padding-bottom: 20px;
}

.boardSubmit button {
  cursor: pointer;
  background-color: #76AC5D;
  color: white;
  font-size: 20px;
  font-weight: bold;
  border-radius: 5px;
  outline: none;
  border: none;
  padding: 10px 10px;
}

/* */
/* MY BOARDS */
.myBoards {
  margin-top: 100px;
  position: absolute;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.myBoardsContent...

JavaScript

let createBoard= document.getElementById("createBoardHeading");
let createForm = document.getElementById("createForm");
let createBoardContainer = document.getElementById("createBoard");
let inputNameCreate = document.getElementById("createName");
let sumbitCreate = document.getElementById("buttonAdd");
let myBoards = document.getElementById("myBoards");
let createBlock = document.getElementById("createBlock");


let listBoards = document.getElementById("myBoardsContent");

window.addEventListener("load", ShowElementsToWindow);

createBoardContainer.addEventListener("mouseover", ShowCreateForm)
createBoardContainer.addEventListener("mouseout", CloseCreateForm)

sumbitCreate.addEventListener("click", CreateBoard);

let board = document.getElementById("container");
board.addEventListener("click", DeleteBoard)

let boards = [];
let user;


class Board {
    constructor (name) {
        this.name = name
    }
    CreateBoard() {
        return listBoards.innerHTML += `<div class="container" id="container">
                                            <div class="deleteContainer" id="deleteContainer"> <span class="containerLine" id="crosserContainer"></span> </div>
                                            <p>${this.name}</p>
                                        </div>`
    }
}

function CreateBoard() {
    if (inputNameCreate.value != "") {
        user = new Board(inputNameCreate.value);
        user.CreateBoard(inputNameCreate.value);
        GetElementLocalStorage();
        AddElementLocalStorage();
    }
}

function DeleteBoard() {
    alert("gsg");
}

function GetElementLocalStorage() {
    boards = JSON.parse(localStorage.getItem("boards"));
    if(boards == null) boards = [];
}

function AddElementLocalStorage() {
    localStorage.setItem("board", JSON.stringify(user));
    boards.push(user);
    localStorage.setItem("boards", JSON.stringify(boards));
    console.log(boards);

}



function ShowElementsToWindow() {
    boards =...