JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>



    <div class="notepad">
        <div class="plate-info-block hide">
            <div class="close-button">

            </div>
        </div>
        <div class="notepad-header">

        </div>
        <div class="notepad-content">
            <div class="notepad-plate">
                <div class="close-plate hide">
                </div>
            </div>


            <div class="notepad-button-add-plate">

            </div>

            <div class="notepad-plate-counter">
                <p class="plate-counter">Количество заметок: 1/6</p>
            </div>
        </div>





    </div>













    <script src="script.js"></script>
</body>

</html>

CSS

.notepad {
    border: 1px solid black;
    border-bottom: 3px solid black;
    border-right: 3px solid black;
    width: 500px;
    height: 800px;
    margin: 50px auto;
}

.notepad-header {
    height: 100px;
    background-color: rgb(42, 149, 168);
}

.notepad-content {
    height: 680px;
    background-color: rgb(228, 244, 247);
    padding-top: 20px;
}

.notepad-plate {
    width: 400px;
    height: 70px;
    background-color: rgb(112, 166, 173);
    margin: 0 auto;
    margin-bottom: 20px;
}

.close-plate {
    
    width: 70px;
    height: 70px;
    border-radius: 25px;
    background-color: brown;
    
}


.notepad-plate:hover {
    border-radius: 25px;
    background-color: rgb(22, 145, 145);
}

.notepad-button-add-plate {
    width: 400px;
    height: 70px;
    background-color: rgb(13, 76, 117);
    margin: 20px auto;
}

.notepad-button-add-plate:hover {
    border-radius: 25px;
    background-color: rgb(12, 79, 141);
}

.notepad-plate-counter {
    width: 400px;
    background-color: rgb(147, 229, 243);
    margin: 0 auto;
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.plate-info-block {
    position: absolute;
    width: 400px;
    height: 400px;
    background-color: rgb(42, 149, 168);
    margin: 200px 40px;
    border: 10px solid black;
}

.hide {
    display: none;
}

.close-button {
    width: 380px;
    height: 40px;
    background-color: rgb(235, 75, 75);
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.close-button:hover {
    background-color: rgb(161, 31, 31);
    border-radius: 10px;
}

JavaScript

var $notepad = document.querySelector('.notepad');
var $notepadContent = document.querySelector('.notepad-content');
var $notepadPlate = document.querySelector('.notepad-plate');
var $notepadButton = document.querySelector('.notepad-button-add-plate');
var $plateCounter = document.querySelector('.plate-counter');
var $plateInfoBlock = document.querySelector('.plate-info-block');
var $closePlate = document.querySelector('.close-plate');

var plateQty = 1;


$notepad.addEventListener('click', notepadClickHandle);


function notepadClickHandle(event) {

    if (event.target.className == 'notepad-button-add-plate' && plateQty < 6) {
        $notepadContent.insertBefore($notepadPlate.cloneNode(true), $notepadButton);
        plateQty++;
        $plateCounter.textContent = 'Количество заметок: ' + plateQty + '/6';
    }

    if (event.target.className == 'notepad-plate') {
        $plateInfoBlock.classList.remove('hide');        
    } 

    if (event.target.className == 'close-button') {
        $plateInfoBlock.classList.add('hide');
    }
}

$notepad.addEventListener('mouseover', notepadMouseOverHandle);
$notepad.addEventListener('mouseout', notepadMouseOutHandle);



function notepadMouseOverHandle(event) {
    if (event.target.className == 'notepad-plate') {
        event.target.firstChild.nextElementSibling.classList.remove('hide');
    }
}

function notepadMouseOutHandle(event) {
    if (event.target.className == 'notepad-plate') {
        event.target.firstChild.nextElementSibling.classList.add('hide');
    }
}