JSFiddle - React, Tailwind, and code Playground

by kushmuffin

HTML

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

CSS

* {
  box-sizing: border-box;
}

body{
  background-color: wheat;
}

.alert{
  padding: 0.5rem;
  
  display: flex;
  justify-content: space-between;
  border: 2px solid;
  border-radius: 5px;
}

.alert-primary{
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}
.alert-success{
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}
.alert-danger{
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
.alert-warning{
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.btn-close{
  border: none;
  border-radius: 5px;
}
.btn-close:hover{
  border: 1px solid;
  border-color: #41464b;
}

JavaScript

let removeBtn = document.querySelectorAll('.btn-close')

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

for(let item of removeBtn){
	item.onclick = remove;
}