JSFiddle - React, Tailwind, and code Playground

by shnny

HTML

<div class="container">
  <div class="btn-group">
    <button class="loginBtn">點我登入帳號</button>
    <button class="postBtn">點我新增貼文</button>
  </div>
  
  <!--LOGIN-MODAL-->
  <div style="display:none"  class="modal login-modal">
    <div class="login">
      <div class="close"><a href="#">X</a></div>
       <p>Login</p>
       <div class="login-account">
           <label for="account">帳號 : </label><br>
           <input id="account"type="text">
       </div>
       <div class="login-password">
          <label for="password">密碼 : </label><br>
           <input id="password"type="text">
       </div>
       <button>登入</button>
    </div>
  </div> 
<!--post-MODAL-->
  
  <div  class="modal post-modal">
    <div class="post-container">
       <div class="post-title">
         <label for="title">標題 : </label><br>
         <input id="title" type="text">
       </div>
      <div class="post-Text">
        <label for="post-Text">內文 : </label>
        <textarea name="post-Text" id="post-Text" cols="30" rows="10">
        </textarea>
      </div>
    </div>
  </div>
</div>

CSS

button{
  padding: 10px;
  color: #8600FF;
  background:#E6CAFF;
  border:1px solid #8600FF;
  border-radius:5px ;
  cursor:pointer;
}

.modal{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
	top: 0;
	left: 0;
  background-color: rgba(0,0,0,0.3);
}
.login{
  width:250px;
  height: 250px;
  border: 1px solid ;
  background: 	#ACD6FF;
  color: 	#003D79;
  text-align: center;
}
.login label{
  text-align: left;
}
.close a{
  display: block;
  font-size: 14px;
  margin-right: 5px;
  text-align:right ;
  text-decoration: none;
  color: #000;
}
.login p{
   margin:2px;
   font-size: 20px;
   font-weight: bold;

}

.login-password,{
  margin-top: 15px;
}
.login input ,.post-title input{
  border-radius: 5px;
}
.login button{
   width: 100px;
   margin-top: 15px;
   padding: 5px;
   background: #FFF;
   color: #000;
}
.post-modal{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.post-container{
  border: 1px solid;
  padding: 15px;
  border-radius: 5px;
}
.post-title{
   width: 250px;
}
.post-title input{
   width: 95%;
}
.post-Text{
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

JavaScript

const loginBtn = document.querySelector('.loginBtn')
const postBtn = document.querySelector('.postBtn')
const closeBtn = document.querySelector('.close a')
function login(){
	const loginModal = document.querySelector('.login-modal')
  loginModal.style.display = "flex"
}
function close(){
	let modal = document.querySelector('.modal')
	modal.style.display = 'none'
}
loginBtn.addEventListener('click',login)
closeBtn.addEventListener('click',close)