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="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/select.css">
  <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <div class="form">
            <form action="#" id="form" class="form__body">
                <h1 class="form__title">Отправка данных на почту</h1>
                <div class="form__item">
                    <label for="formName" class="form__label">Имя:</label>
                    <input id="formName" type="text" name="name" class="form__input _zxc">
                </div>
                <div class="form__item">
                    <label for="formEmail" class="form__label">E-mail:</label>
                    <input id="formEmail" type="text" name="email" class="form__input _zxc _email">
                </div>

                <div class="form__item">
                   <div class="form__label">Левша или Правша</div>
                   <div class="options">
                       <div class="options__item">
                           <input id="formRightHanded" checked type="radio" value="right" name="hand" class="options__input">
                           <label for="formRightHanded" class="options__label">Правша</label>
                       </div>
                       <div class="options__item">
                        <input id="formLeftHanded" type="radio" value="left" name="hand" class="options__input">
                        <label for="formLeftHanded" class="options__label">Правша</label>
                    </div>
                   </div>
                </div>

                <div class="form__item">
                    <label for="formMessage" class="form__label">Сообщение:</label>
                    <textarea name="message"...

CSS

body{
    background-color: grey;
}

.form {
    max-width: 550px;
    margin: 0 auto;
    color: black;
    padding: 30px 0px;
    
}

.form {
    outline: none;
}


.form__title {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 30px 0;
}

.form__item {
    margin: 0 0 20px 0;
}

.form__label {
    font-size: 18px;
    display: block;
    margin: 0 0 10px 0;
}

.form__input {
    height: 50px;
    /* padding: 0 20px; */
    border-radius: 5px;
    width: 100%;
    font-size: 18px;
    transition: all 0.5s ease 0s;
}

.form__input:focus {
    box-shadow: 0 0 15px aquamarine;
}

.form__input._error {
    box-shadow: 0 0 15px red;
}


textarea.form__input {
    min-height: 120px;
    resize: vertical;
    padding: 20px;
}

.options {
    padding: 10px 0 0 0;
}

.options__item {
    margin: 0 0 10px 0;
}

.options__input {
    display: none;
}

.options__input:checked + .options__label::after {
    transform: scale(1);
}

.options__label {
    display: inline-flex;
    font-size: 16px;
    line-height: 140%;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.options__label::before {
    content: "";
    align-self: flex-start;
    flex: 0 0 24px;
    height: 24px;
    background-color: whitesmoke;
    border-radius: 50%;
    margin: 0 10px 0 0 ;
}

.options__label::after {
    transition: transform 0.5s ease 0s;
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    background-color: #77608d;
    border-radius: 50%;
    transform: scale(0);
}


.file__item {
    position: relative;
}

.file__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 0;
    cursor: pointer;
}

.file__button {
    display: inline-flex;
    min-height: 40px;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
    background-color: #77608d;
    padding: 0px 20px;
}

.file__prewiew {
    display: inline-block;
 ...

JavaScript

"use strict"

document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('form');
    form.addEventListener('submit', formSend);

    async function formSend(e) {
        e.preventDefault();

        const error = formValidate(form);

        if (error === 0) {
            
        } else {
            alert('Заполните обязательные поля');
        }

    }


    function formValidate(form) {
        let error = 0;
        let formReq = document.querySelectorAll('._zxc');

        for (let index = 0; index < formReq.length; index++) {
            const input = formReq[index];
            formRemoveError(input);

            if (input.classList.contains('_email')) {
                if (emailTest(input)) {
                    formAddError(input);
                    error++;
                }
            } else if (input.getAttribute("type") === 'checkbox' && input.checkbox === false) {
                formAddError(input)
                error++;
            } else {
                if (input.value === '') {
                    formAddError(input);
                    error++;
                }
            }
        }
        return error;
    }

    function formAddError(input) {
        input.parentElement.classList.add('_error');
        input.classList.add('_error');
    }

    function formRemoveError(input) {
        input.parentElement.classList.remove('_error');
        input.classList.remove('_error');
    }

    //Функция проверки E-mail
    function emailTest(input) {
        const re = !/^\w+([\.-]?\w+)*@\w+)[\.-]?\w+)*(\.\w{2,8})+$/
        return re.test(input.value);
    }
});