JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post">
    <section class="form-group">
        <label for="name">Nombre:</label>
        <input type="text" class="txt"/>
    </section>
    <section class="form-action">
        <input type="submit" value="Enviar"/>
    </section>
</form>

CSS

html {
    box-sizing: inherit;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
form {
    border: 5px solid #eee;
    display: block;
    position: relative;
    transition: all .3s ease-in-out;
    width: 300px;
}
.form-group {
    align-items: center;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    padding: .5rem;
    width: 100%;
}
.form-group > label {
    color: #555;
    font-family: 'segoe ui';
}
.form-group > input {
    border: 1px solid #999;
    font-family: 'segoe ui';
    font-size: .9rem;
    flex-basis: 60%;
    padding: .2rem .5rem;
}
.form-action {
    display: flex;
    justify-content: flex-end;
    padding: .5rem;
}
input[type='submit'] {
    border: 1px solud #c7c7c7;
    font-family: 'segoe ui';
    font-size: .9rem;
    padding: .2rem .5rem;
}
.form-hidden {
    opacity: 0;
    height: 0;
    visibility: hidden;
}
.form-display-none {
    display: none;
}

JavaScript

document.querySelector('form').addEventListener('submit', function(e) {
    var form = this;
    setTimeout(function() {
        form.classList.add('form-hidden');
    }, 1500);
    setTimeout(function() {
        //form.classList.add('form-display-none');
    }, 2000);
});