JSFiddle - React, Tailwind, and code Playground

by Yuriy Savenko

HTML

<input id="switch" type="checkbox" name="test-chkbox" />
<label for="switch">Open modal</label>

<div id="test">
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    <label for="switch">Close modal</label>
    </div>
</div>

CSS

#test {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0.01;
    z-index: -1;
}
input#switch:checked ~ #test {
    opacity: 0.99;
    z-index: 9999999;
}
#test > div {
    background: #fff;
	width: 300px;
	height: 100px;
	padding: 30px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	transform: perspective(300px) rotateX(-90deg);
	transform-origin: top center;
    transition: 0.4s ease;
}
input#switch:checked ~ #test > div {
    transform: none;
}
#test > div label {
    background: #000;
    color: #fff;
    display: block;
    text-align: center;
    padding: 8px;
    margin-top: 20px;
    cursor: pointer;
}