JSFiddle - React, Tailwind, and code Playground

by 81ue_lan

HTML

<div class="alert alert-primary">
  <div class="alert-content">
    <p>歡迎您點擊「抖內」按鈕，以實際行動支持我們。</p>
  </div>
  <div class="alert-btn-wrap">
    <button class="btn-close">×</button>
  </div>
</div>
<hr>
<div class="alert alert-success">
  <div class="alert-content">
    <p>您已成功下訂單！以下為您的訂單詳細資訊。</p>
  </div>
  <div class="alert-btn-wrap">
    <button class="btn-close">×</button>
  </div>
</div>
<hr>
<div class="alert alert-danger">
  <div class="alert-content">
    <p>抱歉，系統發生錯誤，請稍後重新嘗試。</p>
  </div>
  <div class="alert-btn-wrap">
    <button class="btn-close">×</button>
  </div>
</div>
<hr>
<div class="alert alert-warning">
  <div class="alert-content">
   <p>請注意，以下內容包含「劇透」爆雷資訊。</p>
  </div>
  <div class="alert-btn-wrap">
    <button class="btn-close">×</button>
  </div>
</div>

CSS

.alert{
  display: flex;
  align-items: center;
  width: 450px;
  padding: 5px 10px;
  border: 1px solid;
  border-radius: 10px;
  font-weight: 600;
  color: #3C444D;
}
.alert-content{
  width: 400px;
  text-align: center;
  margin-right: auto;
}
.btn-close{
  border: none;
  font-size: 24px;
  background-color: transparent;
  color: #68727C;
  cursor: pointer;
}
.alert-primary{
  border-color: #C6D7E9;
  background-color: #E6EFFA;
}
.alert-success{
   border-color: #CAE9D1;
   background-color: #E9F6ED;
}
.alert-danger{
  border-color: #EACFC8;
  background-color: #FCEDE9;
}
.alert-warning{
  border-color: #F5E8D1;
  background-color: #FEF7EA;
}

JavaScript

const closeBtns = document.querySelectorAll('.btn-close');

function closeHandler(){ 
	event.target.closest('.alert').remove();
}

for(let btn of closeBtns){
	btn.onclick = closeHandler;
}