JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="modal" id="login-modal">
  <div class="modal-content">
    <div>帳號：<input type="text"></div>
    <div>密碼：<input type="password"></div>
    <hr>
    <button class="btn-close">關閉</button>
  </div>  
</div>

<div class="modal" id="post-modal">
  <div class="modal-content">
    <div>標題：<input type="text"></div>
    <div>內文：<textarea></textarea></div>
    <hr>
    <button class="btn-close">關閉</button>
  </div> 
</div>

SCSS

* {
  box-sizing: border-box;  
}

button {
  font-size: 18px;
  border: none;
  background-color: #aaa;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  
  &:hover {
    color: #000;
  }
}

.modal {
  display: none;
  inset: 0;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  
  &-content{
    padding: 10px;
    border-radius: 8px;
    background-color: #fff;
    width: fit-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  &.visible {
    display: block;
  }
}

JavaScript

const login = document.querySelector('#login-modal');
const post = document.querySelector('#post-modal');
const closeButtons = document.querySelectorAll('.btn-close')

function loginModal() {
	modalInit();
	login.classList.add('visible');
}
function postModal() {
	modalInit();
	post.classList.add('visible');
}

function modalInit() {
	login.classList.remove('visible');
  post.classList.remove('visible');
}

function removeModal() {
	event.target.closest('.modal').classList.remove('visible');
}

for(let closeButton of closeButtons) {
	closeButton.onclick = removeModal;
}