JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div id="feedback">
    <div>Заказать обратный звонок</div>
    <ul>
        <li><input placeholder="Имя" type="text" /></li>
        <li><input placeholder="+7 (901) 234-56-78" type="text" /></li>    
        <li class="last"><a href="#">Отправить</a></li>
    </ul>
</div>

CSS

* { padding: 0px; margin: 0px; font-family: 'Calibri', serif; font-size: 1em;}
#feedback { position: absolute; right: 5%; bottom: 5%; background: #ddd; width: 250px; border-radius: 5px;}
#feedback div {text-align: center; cursor: pointer; padding: 2px;}
#feedback ul { padding: 0px 10px 5px 10px; list-style: none; display: none;}
#feedback li { margin-bottom: 5px; }
#feedback input { display: block; width: 225px; }
#feedback a { background: #999; color: #000; border-radius: 5px; padding: 0px 5px; text-decoration: none; transition: background 0.3s 0s;}
#feedback a:hover { background: #333; color: #fff; }
#feedback .last { text-align: right; }

JavaScript

$('#feedback div').click(function(){
    $('#feedback ul').toggle(300);
});

$('#feedback a').click(function(){
    
    // action on submit
    
    $('#feedback ul').toggle(300);
    return false;
});