JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box
}
.alert{
  display: flex;
  width: 400px;
  margin:20px 0 20px 20px;
  height: 50px;
  justify-content: center;
  position: relative;
  border-radius: 5px;
  border: solid #ccc 1px;
}
.alert:hover{
  opacity: 0.8;
}
p{
  line-height: 3;
  font-weight: 400;
}
hr{
  width: 400px;
}
.btn-close{
  border: none;
  height: 20px;
  position: absolute;
  top: 0;
  right: 5px;
  background-color: transparent;
  cursor: pointer;
}
.alert-primary{
  background-color: #00ffef;
}
.alert-success{
  background-color: #90ee90;
}
.alert-danger{
  background-color: #FA8072;
}
.alert-warning{
  background-color: #FF8033;
}

JavaScript

var closeBtn=document.querySelectorAll('.btn-close');
function close(){
  event.target.closest('div').remove();
}
for(var btn of closeBtn){
  btn.onclick=close;
}