JSFiddle - React, Tailwind, and code Playground

by franklinjavier

HTML

<fieldset>
    
    <legend>Fale conosco</legend>
    
    <label for="msg">Mensagem</label>
    <textarea id="msg"></textarea>
    <input type="submit" value="Enviar" />
    
</fieldset>

CSS

fieldset {
    position: absolute;
    bottom: -100px;
    height: 120px;
    border: 1px solid silver;
    border-radius: 8px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;

}
legend { cursor: pointer }
.show { bottom: 0; }

JavaScript

$(function(){
   
    $('fieldset').on( 'click', function( event ) {
        event.preventDefault();
        // so abre/fecha se clicar no element legend
        if ( event.target.nodeName === 'LEGEND' )
            $(this).toggleClass('show');
        
    });        
    
});