JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="cont-chat">
    <div class="form">
        <form action="">
            <fieldset>
                <input type="text" />
                <input type="text" />
                <input type="text" />
                <input type="text" />
            </fieldset>
        </form>
    </div>
    <div class="chat">Establecer conversación</div>
</div>

CSS

.cont-chat{
    width:400px;
    display:block;
    margin:30px auto;
}
.form{
    background:#333;
    padding:10px;
    display:none;
}
.form input{
    background:#fff;
    border:none;
    width:100%;
    height:30px;
    margin-bottom:10px;
}
.chat{
    width:100%;
    text-align:center;
    color:#fff;
    background:#000;
    padding: 10px 0;
    cursor:pointer;
}
fieldset{
    border:none;    
}

JavaScript

$(function(){
    $('.chat').click(function(){
        if($(this).hasClass('activo')){
            $('.form').fadeOut(500);
            $(this).removeClass('activo')
        }else{
            $('.form').fadeIn(500);
            $(this).addClass('activo')
        }
    })
});