JSFiddle - React, Tailwind, and code Playground
HTML
<a class="open" href="#">Обратная связь</a>
<form class="wrapper">
<a class="close">X</a>
<h1>
ОБРАТНАЯ СВЯЗЬ
</h1>
<lable>
Ваше имя*
<input type="text">
</lable>
<lable>
Телефон*
<input type="number">
</lable>
<lable>
Email*
<input type="email">
</lable>
<lable>
Сообщение<br>
<textarea name="mesend" id="" cols="50" rows="10"></textarea>
</lable>
<input type="submit">
</form>
CSS
body{
background:grey;
}
.wrapper{
display:none;
position:absolute;
top:50px;
z-index:9999;
width:400px;
height:500px;
padding:20px 50px 20px 50px;
background:white;
margin:0 auto;
text-align:center;
//position:relative;
}
input:not([type=submit]){
display:block;
margin:0 auto;
width:100%;
height:30px;
}
input[type=submit]{
width:30%;
height:50px;
background:gray;
border:0;
}
textarea{
width:100%;
}
.close{
position:absolute;
right:-30px;
top:-30px;
height:30px;
width:30px;
line-height:30px;
background:#c4c4c4;
cursor:pointer;
}
JavaScript
$('.close').click(function(){
$('.wrapper').hide();
})
$('.open').click(function(){
$('.wrapper').show();
})