JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="loginModal()">點我登入帳號</button>
    <hr>
    <button onclick="postModal()">點我新增貼文</button>

    <br><br>

    <div class="modal" id="login-modal">

        <div class="login-modal-div">
            <br>
            <div><input type="text" placeholder="帳號。 。 。"></div><br>
            <div><input type="password" placeholder="密碼。 。 。"></div><br>
            <button class="btn-close" onclick="close_login_modal()">close</button><br>
        </div>

    </div>



    <div class="modal" id="post-modal">

        <div class="post-modal-div">
            <br>
            <div><input type="text" placeholder="標題。 。 。"></div><br>
            <div><textarea placeholder="內文。 。 。"></textarea></div><br>
            <button class="btn-close" onclick="close_post_modal()">close</button><br><br>
        </div>

    </div>

CSS

.modal{

    display: none;/**/

    position:fixed;
    z-index: 10;

    left: 0;
    top: 0;

    padding-top: 100px;
    padding-left: 50px;

    width: 100%; /* Full width */
    height: 100%; /* Full height */

    /*overflow: auto; /* Enable scroll if needed */

    /*background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    
}

.login-modal-div{
    width: 300px;
    height: 140px;

    text-align: center;

    border-radius: 10px;
    border-style:solid;
    border-width: 5px;
    border-color: rgb(217, 91, 219);
    background-color: rgb(244, 197, 248);
}

.login-modal-div input{

    height: 20px;
    border: 0;
    border-radius: 5px;
    text-indent: 5px;
    font-family: Comic Sans MS , Microsoft JhengHei;
}

.login-modal-div button{

    border: 0;
    border-radius: 5px;
    font-family: Comic Sans MS , Microsoft JhengHei;

    transition: 0.3s;
}
.login-modal-div button:hover{

    transform: scale(1.2);
}


.post-modal-div{
    width: 300px;
    /*height: 170px;*/

    text-align: center;

    border-radius: 10px;
    border-style:solid;
    border-width: 5px;
    border-color: rgb(64, 55, 197);
    background-color: rgb(183, 209, 248);
}

.post-modal-div input{
    width: 200px;
    height: 20px;
    border: 0;
    border-radius: 5px;
    text-indent: 5px;
    font-family: Comic Sans MS , Microsoft JhengHei;
}

.post-modal-div textarea{
    width: 200px;
    height: 50px;
    border: 0;
    border-radius: 5px;
    text-indent: 5px;
    font-family: Comic Sans MS , Microsoft JhengHei;
}

.post-modal-div button{

    border: 0;
    border-radius: 5px;
    font-family: Comic Sans MS , Microsoft JhengHei;

    transition: 0.3s;
}
.post-modal-div button:hover{

    transform: scale(1.2);
}

JavaScript

modal = document.querySelector('.modal');

window.onclick = function(event) {

    if (event.target == modal) {
        modal.style.display = "none";
    }

}




function loginModal(){

    modal = document.querySelector('#login-modal');

    modal.style.display = 'block';

}



function postModal(){

    modal = document.querySelector('#post-modal');

    modal.style.display = 'block';

}


function close_login_modal(){

    document.querySelector('#login-modal').style.display = 'none';

}

function close_post_modal(){

    document.querySelector('#post-modal').style.display = 'none';

}