JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="ru">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/clear.css" rel="stylesheet" type="text/css" />
    <link href="css/adaptive.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/jquery.maskedinput@1.4.1/src/jquery.maskedinput.js" type="text/javascript"></script>
    <script src="js/js.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap" rel="stylesheet">
    <title>Редуслим</title>
</head>

<body>
    <div class="wrapper">
        <div class="item">
            <div class="col img">
                <div class="img-info">
                    <h1>Reduslim</h1>
                    <span>eco</span>
                </div>
                <img src="img/tablets.webp" alt="tablets">
            </div>
            <div class="col form-block">
                <div class="title">
                    <h2>Сделай шаг<br>к выздоровлению</h2>
                </div>
                <form action="#" method="post">
                    <label for="name">ваше <span class="green">имя</span></label>
                    <input type="text" name="user_name" required id="name" placeholder="Алексей">
                    <div class="phone-block">
                        <div class="number">
                            <label for="phone">ваш <span class="green">телефон</span></label>
                            <input class="phone_mask" type="tel" name="user_phone" required id="phone" placeholder="+7 (123) 456 78-90">
 ...

CSS

html,
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    scroll-behavior: smooth;
    background-color: #E5E5E5;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1280px;
    padding: 40px 80px;
    box-sizing: border-box;
    margin: 0 auto;
}

.item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 24px 80px rgba(0, 0, 0, 0.1);
    border-radius: 1px;
}

.col {
    width: 50%;
    height: 100%;
}

.img {
    display: flex;
    position: relative;
    background: url(../img/big-bg.png) center no-repeat;
    background-size: 100% 100%;
    min-height: 500px;
    min-width: 560px;
}

.img img {
    position: absolute;
    left: 10px;
    right: 0;
    bottom: 42px;
    margin: auto;

}

.img-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}


h1 {
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    padding: 40px !important;
}

.img span {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
    color: #fff;
    padding: 0 0 40px 40px;
}



.form-block {
    text-align: center;
}

.title {
    background-color: #F8F8F8;
    padding: 20px 100px;
    border-radius: 50px;
}

h2 {
    font-weight: 800;
    font-size: 30px;
    color: #212121;
}

form {
    padding: 50px 100px !important;
}

label {
    text-transform: uppercase;
    text-align: left;
    width: 100%;
    font-weight: 800;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 10px !important;
}

.green {
    color: #428A60;
}



input {
    display: block;
    margin: 0 auto;
    border: 1px solid #E4E4E4;
    box-sizing: border-box;
    border-radius: 5px !important;
   ...

JavaScript

jQuery(($) => {
    const selectSingle = document.querySelector('.__select');
    const selectSingle_title = selectSingle.querySelector('.__select__title');
    const selectSingle_span = selectSingle.querySelector('.__select__title > span');
    const selectSingle_labels = selectSingle.querySelectorAll('.__select__label');

    // Toggle menu
    selectSingle_title.addEventListener('click', () => {
        if ('active' === selectSingle.getAttribute('data-state')) {
            selectSingle.setAttribute('data-state', '');
        } else {
            selectSingle.setAttribute('data-state', 'active');
        }
    });

    // Close when click to option
    for (let i = 0; i < selectSingle_labels.length; i++) {
        selectSingle_labels[i].addEventListener('click', (evt) => {
            const {
                alt,
                src
            } = evt.currentTarget.querySelector('img')
            
            const imgNode = selectSingle.querySelector('img')

            imgNode.alt = alt
            imgNode.src = src

            selectSingle_span.textContent = evt.currentTarget.textContent

            selectSingle.setAttribute('data-state', '')
        });
    }


    $(".phone_mask").mask("+7 (999) 999-99-99");

});