JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn-1 js-btn" data-modal="modal--1">Button open modal 1</button>
<button class="btn-2 js-btn" data-modal="modal--2">Button open modal 2</button>



<div class="modal modal--1">
    <div class="modal__overlay"></div>
    <div class="modal__content">
        <h2 class="modal__title">Modal 1</h2>

        <form action="#" class="form">
            <input class="form__input" type="text" name="name" placeholder="Name">
            <input class="form__input" type="email" name="email" placeholder="Email">
            <button class="form__submit">Submit</button>
        </form>

    </div>

    <button class="modal__close">close</button>
</div>

<div class="modal modal--2">
    <div class="modal__overlay"></div>
    <div class="modal__content">
        <h2 class="modal__title">Modal 2</h2>

        <form action="#" class="form">
            <input class="form__input" type="text" name="name" placeholder="Name">
            <input class="form__input" type="email" name="email" placeholder="Email">
            <button class="form__submit">Submit</button>
        </form>

    </div>

    <button class="modal__close">close</button>
</div>

CSS

* {
    box-sizing: border-box;
}

.modal {
    display: none;
    padding: 25px;
    background: #fff;
    border: 1px solid #ccc;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
}

.modal--open {
    display: block;
}

.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
}

.modal__content {
    padding: 25px;
    background-color: #fff;
    position: relative;
    text-align: center;
}

.modal__title {
    margin-top: 0;
}

.modal__close {
    position: absolute;
    top: 0;
    right: 0;
    color: #f00;
}

.form__input,
.form__submit {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 10px;
    padding: 5px 15px;
}


.form__error {
    color: #f00;
    margin: 5px 0 10px;
}

JavaScript

(function() {

    function openModal(event) {
        const target = event.target;
        if (target.classList.contains('js-btn')) {
            const modal = target.dataset.modal;
            document.querySelector('.' + modal).classList.add('modal--open');
        }
    }

    function closeModal(event) {
        const target = event.target;
        if (target.classList.contains('modal__close')) {
            target.closest('.modal').classList.remove('modal--open');
        }
    }

    document.addEventListener('click', openModal);
    document.addEventListener('click', closeModal);


    function initValidate(form) {

        const inputs = form.querySelectorAll('.form__input');
        const submit = form.querySelector('.form__submit');

        function generateErrors(text) {
            let error = document.createElement('div');
            error.classList.add('form__error');
            error.textContent = text;

            return error;
        }

        function removeErrors() {
            const errors = form.querySelectorAll('.form__error');
            for (let i = 0; i < errors.length; i++) {
                errors[i].remove();
				
				if (errors < 0) {
                    submit.setAttribute('disabled', true);
                } else {
                    submit.removeAttribute('disabled');
                }
            }

        }

        // Проверка на пустоту
        function checkFieldsEmpty(input) {
            if (!input.value) {
                const error = generateErrors('This is a required field');
                input.parentElement.insertBefore(error, input.nextSibling);
            }
        }

        // Проверка на кол-во введенных символов
        function checkFieldsMinMaxLength(input, min, max) {
            if (input.value.length < min || input.value.length > max) {
                const error = generateErrors(`${min} to ${max} characters`);
                input.parentElement.insertBefore(error, input.nextSibling);
       ...