JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="modal" id="login-modal">
  <div class="content">
    <div>帳號：<input type="text"></div>
    <div>密碼：<input type="password"></div>
    <hr>
    <button onclick="closeLogin()" class="btn-close">關閉</button>
  </div>    
</div>
<div class="modal" id="post-modal">
  <div class="content">
    <div>標題：<input type="text"></div>
    <div>內文：</div>
    <textarea name="" id="" cols="30" rows="5"></textarea>
    <button onclick="closePost()" class="btn-close">關閉</button>
  </div>
</div>

CSS

.btn{
  display: flex;
  justify-content: center;
}
button{
  background-color: #0ff;
  border-radius: 10px;
  border: solid #ccc 1px;
  padding: 5px;
  font-weight: 600;
  margin: 10px;
  cursor: pointer;
}
button:hover{
  opacity: 0.8;
}
.modal{
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: #00000066;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: 0.5s;
}
.modal button{
  background-color: #aaa;
  display: block;
}
.content{
  border: solid #ccc 1px;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
}
.content div{
  font-weight: 600;
  margin-bottom: 5px;
}
input{
  border-radius: 5px;
  border: solid 1px;
}
textarea{
  border-radius: 5px;
  border: solid 1px;
}

JavaScript

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

function loginModal(){
  login.style.zIndex='1';
  login.style.opacity='1';       
}
function postModal(){  
  post.style.zIndex='1';
  post.style.opacity='1';  
}
function closeLogin(){
  login.style.zIndex='-1';
  login.style.opacity='0';  
}
function closePost(){
  post.style.zIndex='-1';
  post.style.opacity='0'; 
}