JSFiddle - React, Tailwind, and code Playground

by Peter A

HTML

<button class="button button_border fa fa-info" data-button="grey" onclick="document.getElementsByClassName('popup')[0].classList.toggle('down')">Click me</button>
    <div class="popup"></div>

CSS

.popup {
            position: fixed;
            width: 650px;
            height: 56vh;
            background: rgb(230,230,230);
            top: -100vh;
            left: calc(50vw - 325px);
            box-shadow: 0 0 10px grey;
            font-family: monospace;
            padding: 20px;
            box-sizing: border-box;
            line-height: 1.5em;
            font-size: 16px;
            transition: all 1s;
            overflow-Y: scroll;
        }
            .popup.down {
                top: 21vh;
            }