JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<a href="#w" id="button">Кнопка</a>
    <div class="window" id="w"></div>
    <a href="#x" class="close" title="Закрыть" id="x"></a>

CSS

window {
      top: 50%;
      left: 50%;
      width: 500px;
      height: 800px;
      z-index: 12;
      margin: -400px 0 0 -250px;
      position: fixed;
      padding: 3px;
      border: 1px solid;
      box-shadow: 5px 5px 5px rgba(0,1,0,.19);
      overflow-y: auto;
      display: none;
    }
    .window:target {
      display: block;
    }
    .close {
      top: 50%;
      right: 50%;
      width: 17px;
      height: 17px;
      margin: -418px -274px;
      position: fixed;
      padding: 0;
      border: 1px solid #ccd;
      border-radius: 9px;
      background-color: rgba(61, 61, 61, 0.81);
      text-align: center;
      text-decoration: none;
      font: 14px sans-serif;
      display: block;
    }
    .close:before {
      color: white;
      content: "X";
    }
    .close:target {
      display: none;
    }