JSFiddle - React, Tailwind, and code Playground

by tsaii

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

* {
  box-sizing: border-box;
  font-size: 16px;
}



.alert {
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding: 10px;
  margin: 15px auto;
  border-radius: 10px;
  width: 500px;

}

.btn-close {
  background-color: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
}
 .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.7);
  }

.alert-primary {
  background-color: rgb(46 119 192 / 0.36);
  color: #1768BA;
}

.alert-success {
  background-color: rgb(119 192 46 / 0.35);
  color: #77C02E;
}

.alert-danger {
  background-color: rgb(186 23 23 / 0.33);
  color: #E33535;
}

.alert-warning {
  background-color: rgb(186 115 23 / 0.33);
  color: #EA9E61;
}

JavaScript

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

for (let n of btn) {
  n.onclick = remove
}

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

}