JSFiddle - React, Tailwind, and code Playground

by WORKMAN

HTML

<a href="#win1" rel="nofollow">Ссылка вызова</a>
<div class="popup" id="win1">
<a rel="nofollow" class="close sf" href="#close"></a>
</div>

CSS

.overlay:target {
 //display:block
}
.popup {
 bottom: :-100%;
 right:0;
 left:50%;
 font-size:14px;
 z-index:20;
 margin:0;
 width:85%;
 min-width:200px;
 max-width:400px;
 position:fixed;
 padding:15px;
 border:1px solid #383838;
 background:#fefefe;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 -ms-border-radius:4px;
 border-radius:4px;
 font:14px/18px 'Tahoma',Arial,sans-serif;
  -webkit-transform:translate(-50%,1500%);
  -ms-transform:translate(-50%,1500%);
  -o-transform:translate(-50%,1500%);
  transform:translate(-50%,1500%);
 -webkit-transition:-webkit-transform .6s ease-out;
 -moz-transition:-moz-transform .6s ease-out;
 -o-transition:-o-transform .6s ease-out;
 transition:transform .6s ease-out
}
.popup:target {
 -webkit-transform:translate(-50%,0);
 -ms-transform:translate(-50%,0);
 -o-transform:translate(-50%,0);
 transform:translate(-50%,0);
 bottom:15%
}
.close {
 top:-10px;
 right:-10px;
 width:23px;
 height:23px;
 position:absolute;
 padding:0;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%;
 background-color:rgba(61,61,61,.8);
 text-align:center;
 text-decoration:none;
 font:13px/20px 'Tahoma',Arial,sans-serif;
 font-weight:700
}
.close:before {
 color:rgba(255,255,255,.9);
 content:"X";
 text-shadow:0 -1px rgba(0,0,0,.9);
 font-size:12px
}
.close:hover {
 background-color:rgba(252,20,0,.8);
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 transform:rotate(360deg)
}