Create a new version of paste:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Table</title>

    <style>
        /* #table-data tr:nth-child(even) { background: transparent; } */
        #table-data tbody tr:hover { background-color: #5a09fb; background-image: linear-gradient(303deg, #5a09fb 0%, #ab31e4 100%); }
        /* #table-data tbody tr:hover { background: rgba(0, 0, 0, 0.130); transition: .4s; } */
        #table-data td { border-right: #8554fe 1px solid; }
        #table-data td { border-bottom: #8554fe 1px solid; }
        #table-data td:last-child { border-right: none; }

        /* SCROLLBAR */
        .custom-scrollbar::-webkit-scrollbar-corner{
            background-color: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 12px;
            height: 8px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #2d3748;
            /* border-radius: 10px; */
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: linear-gradient(303deg, #5a09fb 0%, #ab31e4 100%);
            border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(303deg, #5a09fb 0%, #ab31e4 100%);
        }
    </style>
</head>
<body class="bg-gray-800 custom-scrollbar">
    <div class="w-11/12 mt-10 mx-auto">
        <div class="custom-scrollbar rounded shadow-2xl overflow-x-auto h-56">
            <table id="table-data" class="text-sm w-full border-collapse">
                <thead class="" style="background-color: #ab31e4; background-image: linear-gradient(303deg, #ab31e4 0%, #5a09fb 100%);">
                    <tr class="border-b border-indigo-800">
                        <th class="text-white font-semibold uppercase text-center p-3">Foto</th>
                        <th class="text-white font-semibold uppercase text-center p-3">Nome</th>
                        <th class="text-white font-semibold uppercase text-center p-3">Idade</th>
                        <th class="text-white font-semibold uppercase text-center p-3">Sexo</th>
                        <th class="text-white font-semibold uppercase text-center p-3">Linguagem</th>
                        <th class="text-white font-semibold uppercase text-center p-3">Desenvolvedor</th>
                        <th class="text-white font-semibold uppercase text-center p-3">Ação</th>
                    </tr>
                </thead>
                <tbody style="background-color: #ab31e4; background-image: linear-gradient(303deg, #ab31e4 0%, #5a09fb 100%);">
                    <tr>
                        <td class="text-white uppercase text-center p-3"><img src="wallpaper.jpg" alt="Perfil" class="mx-auto h-12 w-12 rounded-full"></td>
                        <td class="text-white uppercase text-center p-3">Sup3r-Us3r</td>
                        <td class="text-white uppercase text-center p-3">20</td>
                        <td class="text-white uppercase text-center p-3">M</td>
                        <td class="text-white uppercase text-center p-3">Javascript - Nodejs - PostgreSQL</td>
                        <td class="text-white uppercase text-center p-3">Sim</td>
                        <td class="text-white uppercase text-center p-3">
                            <button id="edit" type="send" class="w-full mb-0 md:mb-2 lg:mb-2 px-3 py-1 bg-indigo-700 text-white font-semibold rounded hover:bg-indigo-600 focus:outline-none">Editar</button>
                            <button type="send" class="w-full mt-2 md:mt-0 lg:mt-0 px-3 py-1 bg-pink-600 text-white font-semibold rounded hover:bg-pink-500 focus:outline-none">Excluir</button>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-white uppercase text-center p-3"><img src="wallpaper.jpg" alt="Perfil" class="mx-auto h-12 w-12 rounded-full"></td>
                        <td class="text-white uppercase text-center p-3">Us3r-Ro0t</td>
                        <td class="text-white uppercase text-center p-3">20</td>
                        <td class="text-white uppercase text-center p-3">M</td>
                        <td class="text-white uppercase text-center p-3">Javascript - Nodejs - GraphQL</td>
                        <td class="text-white uppercase text-center p-3">Não</td>
                        <td class="text-white uppercase text-center p-3">
                            <button id="edit" type="send" class="w-full mb-0 md:mb-2 lg:mb-2 px-3 py-1 bg-indigo-700 text-white font-semibold rounded hover:bg-indigo-600 focus:outline-none">Editar</button>
                            <button type="send" class="w-full mt-2 md:mt-0 lg:mt-0 px-3 py-1 bg-pink-600 text-white font-semibold rounded hover:bg-pink-500 focus:outline-none">Excluir</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <br>
    <br>
    <br>
    <br>
    <br>

    <form id="form-data" class="max-w-4xl bg-gray-900 mx-auto rounded shadow-2xl p-10">
        <div class="relative mb-20">
            <svg id="close" class="absolute -mr-6 -mt-6 h-6 w-6 top-0 right-0 fill-current text-white cursor-pointer hover:text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 11.293L22.293 1l.707.707L12.707 12 23 22.293l-.707.707L12 12.707 1.707 23 1 22.293 11.293 12 1 1.707 1.707 1 12 11.293z"/></svg>
        </div>
        <div class="flex flex-wrap justify-center items-center">
            <section class="w-full md:w-1/2 lg:w-1/2 mt-10 md:mt-0 lg:mt-0">
                <div class="flex flex-wrap justify-center md:justify-start lg:justify-start items-center -mt-20 mb-10">
                    <span class="text-3xl text-white font-light">Adicionar Usuário</span>
                </div>
                <div class="block text-center md:text-left lg:text-left mb-12 md:mb-0 lg:mb-0">
                    <img id="preview-photo" class="mx-auto md:mx-0 lg:mx-0 h-40 w-40 object-cover rounded-full mb-5" src="https://cdn.iconscout.com/icon/free/png-256/hacker-7-71228.png" alt="Profile">
                    <!-- <button name="photoo" class="text-indigo-600 bg-transparent border border-indigo-600 uppercase text-base px-12 py-2 rounded font-semibold hover:text-white hover:bg-indigo-600 focus:outline-none" style="transition: .4s;">Trocar</button> -->
                    <div class="relative">
                        <input name="photo" id="file" type="file" class="absolute hidden text-white"/>
                        <label for="file" class="cursor-pointer text-indigo-600 border border-indigo-600 bg-transparent uppercase text-base px-12 py-2 rounded font-semibold hover:text-white hover:bg-indigo-600 focus:outline-none">Trocar
                            <span id="filename" class="mt-10 left-0 mx-auto absolute text-white text-xs"></span>
                        </label>
                    </div>
                </div>
            </section>
            <section class="w-full md:w-1/2 lg:w-1/2">
                <div class="w-full flex flex-wrap md:flex-no-wrap lg:flex-no-wrap justify-start md:justify-center lg:justify-center items-center mb-5">
                    <span class="w-full md:w-2/6 lg-w-2/6 text-gray-200 text-base uppercase font-semibold text-left md:text-right lg:text-right mr-0 md:mr-5 lg:mr-5 mb-3 md:mb-0 lg:mb-0">Nome</span>
                    <input name="user" class="w-full py-2 px-5 text-indigo-600 rounded bg-transparent border border-indigo-600 focus:outline-none focus:border-indigo-500" type="text" placeholder="Digite seu nome">
                </div>
                <div class="w-full flex flex-wrap md:flex-no-wrap lg:flex-no-wrap justify-start md:justify-center lg:justify-center items-center mb-5">
                    <span class="w-full md:w-2/6 lg-w-2/6 text-gray-200 text-base uppercase font-semibold text-left md:text-right lg:text-right mr-0 md:mr-5 lg:mr-5 mb-3 md:mb-0 lg:mb-0">Idade</span>
                    <input name="age" class="w-full py-2 px-5 text-indigo-600 rounded bg-transparent border border-indigo-600 focus:outline-none focus:border-indigo-500" type="text" placeholder="Digite sua idade">
                </div>
                <div class="w-full flex flex-wrap md:flex-no-wrap lg:flex-no-wrap justify-start md:justify-center lg:justify-center items-center mb-5">
                    <span class="w-full md:w-2/6 lg-w-2/6 text-gray-200 text-base uppercase font-semibold text-left md:text-right lg:text-right mr-0 md:mr-5 lg:mr-5 mb-3 md:mb-0 lg:mb-0">Sexo</span>
                    <select name="gender" selected="selected" class="w-full py-2 px-5 text-indigo-600 rounded bg-transparent border border-indigo-600 focus:outline-none focus:border-indigo-500">
                        <option class="hidden" value="">Selecione uma opção</option>
                        <option value="male">Masculino</option>
                        <option value="female">Feminino</option>
                    </select>
                </div>
                <div class="w-full flex flex-wrap md:flex-no-wrap lg:flex-no-wrap justify-start md:justify-center lg:justify-center items-center mb-5">
                    <span class="w-full md:w-2/6 lg-w-2/6 text-gray-200 text-base uppercase font-semibold text-left md:text-right lg:text-right mr-0 md:mr-5 lg:mr-5 mb-3 md:mb-0 lg:mb-0">Linguagem</span>
                    <input name="language" class="w-full py-2 px-5 text-indigo-600 rounded bg-transparent border border-indigo-600 focus:outline-none focus:border-indigo-500" type="text" placeholder="Linguagens favoritas">
                </div>
                <div class="w-full flex flex-wrap md:flex-no-wrap lg:flex-no-wrap justify-start md:justify-center lg:justify-center items-center mb-5">
                    <span class="w-full md:w-2/6 lg:w-2/6 text-gray-200 text-base uppercase font-semibold text-left md:text-right lg:text-right mr-0 md:mr-5 lg:mr-5 mb-3 md:mb-0 lg:mb-0">Dev</span>
                    <div action="" class="w-full py-2 text-indigo-600 rounded bg-transparent">
                        <input class="mr-2" type="radio" name="developer" value="yes">Sim
                        <input class="ml-5 mr-2" type="radio" name="developer" value="no">Não
                    </div>
                </div>
                <div class="w-full flex flex-wrap justify-center items-center mt-16">
                    <button id="save" type="send" class="mx-1 mt-2 md:mt-0 lg:mt-0 w-full md:w-2/5 lg:w-2/5 text-indigo-600 bg-transparent border border-indigo-600 uppercase text-base py-2 rounded font-semibold hover:text-white hover:bg-indigo-600 focus:outline-none" style="transition: .4s;">Salvar</button>
                    <button id="cancel" type="reset" class="mx-1 mt-2 md:mt-0 lg:mt-0 w-full md:w-2/5 lg:w-2/5 text-indigo-600 bg-transparent border border-indigo-600 uppercase text-base py-2 rounded font-semibold hover:text-white hover:bg-indigo-600 focus:outline-none" style="transition: .4s;">Cancelar</button>
                </div>
            </section>
        </div>
    </form>
    
    <br>
    <br>
    <br>
    <br>
    <br>

    <div class="flex justify-center items-center bottom-0 mb-10">
        <div id="modal" class="flex justify-center items-center h-16 w-16 bg-indigo-600 rounded-full cursor-pointer shadow-lg hover:bg-indigo-500 p-8 border-2 border-indigo-500">
            <span class="font-bold text-sm uppercase text-white">Modal</span>
        </div>
    </div>

    <script src="controller/AddUserToTable.js"></script>
    <script src="js/index.js"></script>
    <script>
        document.querySelector('#file').addEventListener('change', (event) => {
            let filename = event.target.files[0].name
            console.log('FILENAME -> ', filename);
            document.querySelector('#filename').innerHTML = filename;
        });
    </script>
</body>
</html>