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="">BOARDS</a>
        </div>
    </header>
    <div class="main">
        <div class="mainWrapper">
            <div class="createBoard">
                <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="createBoard">Добавить</button></div>
                                <div class="boardSubmitClose"> <span class="boardCreateLine"></span> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="myBoards">
                <div class="mainWrapper">
                    <div class="myBoardsTitle">
                        <p>My Boards</p>
              ...

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: 300px;
}

.createBoardHeading {
  z-index: 1;
  background-color: #ffc478;
  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 {
  position: absolute;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.myBoardsTitle p {
  color: black;
 ...

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("createBoard");

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

createBoardContainer.addEventListener("mouseover", ShowCreateForm)
createBoardContainer.addEventListener("mouseout", CloseCreateForm)
sumbitCreate.addEventListener("click", CreateBoard);

function CreateBoard() {
    listBoards.innerHTML += "<p>gsg</p>"
}

function ShowCreateForm() {
    createForm.classList.add("activeCreate");
}

function CloseCreateForm() {
    createForm.classList.remove("activeCreate");
}