JSFiddle - React, Tailwind, and code Playground

HTML

<a class="" href="#modal-container">Нажми на меня</a><div id="modal-container">
        <div class="modal">
            <a href="#">CLOSE</a>
        </div>

CSS

#modal-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.8);
			justify-content: center;
			align-items: center;
			display: flex;
		}

.modal {
    width: 500px;
    background-color: #fff;
    padding: 16px;
			text-align: center;
    border-radius: 8px;
		}

		#modal-container:not(:target) {
    top: -100%;
			transition: top 1.5s;
		}

		#modal-container:target {
    top:0;
			transition: top 1s;
		}