JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <p>sdflaskdf</p>
        <div class='modal'>M<input class='button' name="Button1" type="button" value="button" /></div>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>
        <p>sdflaskdf</p>      
    </body>

CSS

html,body {
    position:absolute;
    top:0;bottom:0;
    left:0;right:0;
    overflow:auto;
}
body {
    overflow:auto;
}
.button {
    display:none;
    margin:25%;
}
.modal {
    position:fixed;
    top:1%;width:20px;
    bottom:1%;
    right:5%;
    background:gray;
} 
.modal:hover {
    position:fixed;
    top:1%;bottom:1%;
    left:1%;right:1%;
    width:auto;
    opacity:.75;
}
.modal:hover .button {
    display:block;
}