JSFiddle - React, Tailwind, and code Playground
by Alex Slepenkov
HTML
<div id="cbf" class="callback-modal">
<form action="action_page.php" method="post">
<a href="#" class="closebtn">Г—</a>
<fieldset>
<legend align="center">Обратный звонок</legend>
<input type="tel" name="usrtel" placeholder="Ваш телефон" required>
</fieldset>
<input type="submit" value="Отправить">
</form>
</div>
CSS
.callback-modal {
display: none;
}
.callback-modal {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
z-index: 9999;
}
.callback-modal form {
position: relative;
margin: 0 auto;
}
.callback-modal:target {
display: block;
}
.closebtn {
text-decoration: none;
position: absolute;
top: 0;
right: 20px;
font-size: 32px;
font-weight: bold;
color: #838383;
}
.closebtn:hover,
.closebtn:focus {
color: #7a0000;
text-decoration: none;
cursor: pointer;
}