JSFiddle - React, Tailwind, and code Playground

HTML

<!-- JavaScript 系列三：練習3 ── modal 互動視窗元件 -->
<!-- Nord Polar Night配色:https://www.nordtheme.com/docs/colors-and-palettes -->
<!-- lightbox Ref1 html+css: https://ithelp.ithome.com.tw/m/articles/10333376 -->
<!-- How TO - CSS/JS Modal https://www.w3schools.com/howto/howto_css_modals.asp-->
<!-- How TO - Full screen Overlay Navigation https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <button onclick="loginModal()">點我登入帳號</button>
    <hr>
    <button onclick="postModal()">點我新增貼文</button>
    <div class="modal" id="login-modal">
        <div class="lightbox">
            <div>帳號：</div>
            <input type="text" placeholder="請輸入您的信箱帳號">
            <div>密碼:</div>
            <input type="password" placeholder="請輸入您的密碼">
            <div>
                <button class="btn-close">關閉</button>
            </div>
        </div>
    </div>
    <div class="modal" id="post-modal">
        <div class="lightbox">
            <div>標題：</div>
            <input type="text" placeholder="上限為10字">
            <div>內文：</div>
            <textarea></textarea>
            <div>
                <button class="btn-close">關閉</button>
            </div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>

</html>

CSS

/* https://www.w3schools.com/cssref/css_selectors.php */
/* div > p	Selects all <p> elements where the parent is a <div> element */
/* div + p Selects the first <p> element that is placed immediately after <div> elements */
/* p ~ ul	Selects every <ul> element that is preceded by a <p> element */
* {
    box-sizing: border-box;
}

body {
    background: #D8DEE9;
    color: black;
    font-size: system-ui;
}

button {
    background-color: black;
    border: 2px solid #ECEFF4;
    color: white;
    font-weight: bolder;
    border-radius: 5px;
    font-size: 18px;
    padding: 6px;
    cursor: pointer;
}

.modal#login-modal,
.modal#post-modal {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    padding-top: 10%;
    width: 0%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    overflow-x: hidden;
    transition: 0.05s;
}

.lightbox {
    border: 2px solid #ECEFF4;
    border-radius: 10px;
    background-color: #E5E9F0;
    width: 300px;
    height: 240px;
    margin: auto;
    align-items: center;
    padding-left: 2%;
    padding-top: 2%;
}

.lightbox>div {
    font-size: 18px;
    text-align: left;
    align-items: center;
}

.lightbox>input {
    font-size: 18px;
    width: 80%;
    margin-bottom: 1rem;
}

.lightbox>textarea {
    font-size: 18px;
    width: 80%;
    height: 20%;
    margin-bottom: 1rem;
}

.btn-close {
    position: relative;
    right: -65%;
    margin-top: 1%;
}

JavaScript

let loginTag = document.querySelector('.modal#login-modal');
let postTag = document.querySelector('.modal#post-modal')
let closeLogin = document.querySelector('#login-modal .btn-close');
let closePost = document.querySelector('#post-modal .btn-close');

function loginModal() {
    // loginTag.style.display = 'block';
    loginTag.style.width = '100%';
}

function postModal() {
    // postTag.style.display = 'block';
    postTag.style.width = '100%';

}

closeLogin.onclick = function () {
    loginTag.style.width = '0%';
}

closePost.onclick = function () {
    postTag.style.width = '0%';
}