JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>燈箱</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <button onclick="loginModal()">點我登入帳號</button>
    <hr />
    <button onclick="postModal()">點我新增貼文</button>

    <div class="modal" id="login-modal">
      <div>帳號：<input type="text" /></div>
      <div>密碼：<input type="password" /></div>
      <hr />
      <button class="btn-close">關閉</button>
    </div>
    <div class="modal" id="post-modal">
      <div>標題：<input type="text" /></div>
      <div>內文：<textarea></textarea></div>
      <hr />
      <button class="btn-close">關閉</button>
    </div>

    <div class="box account">
      <h2>註冊</h2>
      <button class="google item">
        <i class="fa fa-google-plus" style="font-size: 24px"></i
        ><span>Google</span>
      </button>
      <button class="fb item">
        <i class="fa fa-facebook" style="font-size: 24px"></i
        ><span>facebook</span>
      </button>
      <button class="twitter item">
        <i class="fa fa-twitter" style="font-size:24px"></i></i
        ><span>twitter</span>
      </button>
      <input type="email" placeholder="電子郵箱" >
      <input type="email" placeholder="用戶名" >
      <input type="text" placeholder="密碼">
      <div class="member">
        <a href="#">已有帳號?</a>
        <button class="register">註冊</button>
      </div>
      <button class="close-btn" onclick="closeBtn()">X</button>
    </div>
   
    <div class="box newPost">
      <h2>新增貼文</h2>
      <div class="title"><span class="newPost_title">主題</span><input class="title_input" type="text"></div>
      <input type="text" class="content">
  ...

CSS

* {
  padding: 0;
  margin: 0;
}

body {
  position: relative;
}

.bg-color {
  background-color: black;
  opacity: 0.5;
  position: absolute;
}

.box {
  width: 520px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background-color: #fff;
  display: none;
  opacity: 0;
  flex-direction: column;
  align-items: center;
  padding: 10px 30px;
  margin: 0 auto;
  position: sticky;
  top: 0px;
  z-index: 1;
}

.item {
  width: 80%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 5px;
  margin-top: 20px;
  padding: 10px;
  cursor: pointer;
}

.item i {
  font-size: 30px;
  margin-right: 10px;
}

.item span {
  font-size: 20px;
}

.close-btn {
  position: absolute;
  right: -10px;
  top: -10px;
  padding: 5px 10px;
  border: none;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-size: 20px;
}

.google {
  background-color: #ff311f;
  color: #fff;
}

.fb {
  background-color: rgb(8 102 255);
  color: #fff;
}

.twitter {
  background-color: rgb(29, 155, 240);
  color: #fff;
}
hr {
  color: black;
}
.account input {
  width: 80%;
  margin-top: 20px;
  height: 30px;
}
.member {
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.member a {
  text-decoration: none;
}

.register {
  background-color: blue;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 5px;
  font-weight: 600;
  cursor:pointer;
}

.newPost textarea {
  width: 90%;
  height: 200px;
}

.box .title {
  margin: 0 auto;
  width: 80%;
}

.newPost_title {
  display: inline-block;
  margin-top: 30px;
  margin-right: 10px;
  margin-bottom: 20px;
}

.newPost .title_input {
  width: 80%;
  height: 30px;
}

.newPost .content {
  width: 80%;
  height: 300px;
  border-radius: 5px;
  border: 1px solid black;
}

.submit {
  width: 200px;
  padding: 10px;
  border-radius: 5px;
  background-color: blue;
...

JavaScript

function closeBtn() {
  let overlay = document.querySelector(".overlay");
  event.target.closest("div.box").style.display = "none";
  overlay.style.display = "none";
}

function loginModal() {
  let box = document.querySelector(".account");
  let overlay = document.querySelector(".overlay");
  box.style.display = "flex";
  box.style.opacity = 1;
  overlay.style.display = "block";
}
function postModal() {
  let box = document.querySelector(".newPost");
  let overlay = document.querySelector(".overlay");
  box.style.display = "flex";
  box.style.opacity = 1;
  overlay.style.display = "block";
}