JSFiddle - React, Tailwind, and code Playground

by shnny

HTML

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

CSS

.alert{
  border-radius:5px;
  padding: 8px;
  border:1px solid
}
.alert-primary{
	background: #d6ebff;
  border-color:  #194a7a;
  color: #1f5c99;
}

.alert-success{
  background: #d5f1de;
  border-color: #16582c;
  color:#1c6e37;
}

.alert-danger{
  background: #fadddd;
  border-color:  #6e2828;
  color:#893232;  
}

.alert-warning{
  background:#feefd0;
  border-color:#77550a;
  color:#956a0d;  
}

JavaScript

const closeBtn = document.querySelectorAll('.btn-close')
closeBtn.forEach((btn)=>{
	btn.addEventListener('click',(e)=>{
  	btn.closest('.alert').remove();
  })
})