JSFiddle - React, Tailwind, and code Playground
by Sergey khorev
HTML
<!-- dog sale -->
<a href="#" id="mk1" style="display:none;" class="btn-mondal open-modal" data-modal="#modal1">Open Modal</a>
<div class="overlay">
<div class="modal" id="modal1">
<div class="content">
<a href="/aktsii/darim-strakhovanie-do-6-mln-rubley/"><img class="wrapper-akcii" src="https://skb44.ru/upload/222.png" ></a>
<!-- <h1 class="title">Страховка в подарок</h1>
<p>
Страхование недвижимости до 6 млн. рублей
</p>
-->
<div class="fx__it">
<div class="qs-tt__bt">
<a class="btn-mondal close-modal" id="mk2" data-modal="#modal1" href="#">Х</a>
<a href="#" style=" padding: 0px 10px;" data-dialog="dlgQuestion" class="bt bt--cg bt--wd" onclick="yaCounter12725368.reachGoal('feedback');gtag('event', 'send', { 'event_category': 'buy-g', 'event_action': 'button-feedback', }); return true;">Задать вопрос</a>
</div>
</div>
</div>
</div>
</div>
<style>
.wrapper-akcii {
max-width: 250px;
margin: 0 auto;
border: 0px solid #888;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 10px;
}
.btn-mondal {
padding: 3px 10px;
display: inline-block;
background: #EF233C;
color: white;
text-decoration: none;
transition: 0.35s ease-in-out;
font-weight: 700;
}
.btn:hover {
background: #dc1029;
}
.overlay {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: fixed;
left: 0;
opacity: 0;
pointer-events: none;
transition: 0.35s 150px ease-in-out;
opacity: 0;
border: none;
position: fixed;
z-index: 800;
bottom: 20px;
right: 0px;
width: 260px;
}
.overlay.open {
opacity: 1;
pointer-events: inherit;
}
.overlay .modal {
text-align: center;
opacity: 0;
pointer-events: none;
transition: 0.35s ease-in-out;
max-height: 100vh;
overflow-y: auto;
}
.overlay .modal.open {
opacity: 1;
pointer-events:...