JSFiddle - React, Tailwind, and code Playground

HTML

<select id="cbox">
    <option value="show">Mostrar</option>
    <option value="hide" selected>Ocultar</option>
</select>
<section class="inputs hidden remove-height">
    <input type="text" placeholder="usuario"/>
    <input type="secret" placeholder="password"/>
</section>
<button>Hola</button>

CSS

.inputs {
    opacity: 1;
    overflow: hidden;
    visibility: visible;
    transition: all .3s ease-in-out;
}
.hidden {
    opacity: 0;
    visibility: hidden;
}
.remove-height {
    height: 0;
}
}

JavaScript

$('#cbox').on('change', function() {
    var selected = $(this).val();
    if(selected === 'show') {
        $('.inputs').removeClass('hidden');
        $('.inputs').removeClass('remove-height');
    }
    else {
        $('.inputs').addClass('hidden');
        setTimeout(function() {
           $('.inputs').addClass('remove-height');
        }, 200);
    }
});