JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://kit.fontawesome.com/8e0b390e3e.js"></script>

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

CSS

.alert{
  padding: 1rem;
  border-radius:10px;
  color: white;
}

.alert-primary{
  background-color:#34c796;
}

.alert-success{
  background-color:#0ec5e6;
}

.alert-danger{
  background-color:#f0b800;
}

.alert-warning{
  background-color:#de5464;
}

.btn-close{
  border:none;
  background-color:transparent;
  opacity:0.6;
  font-size: 30px;
  cursor:pointer;
  padding:0 10px;
  border-radius:30px;
  transition:transform .3s ease-in;
}

.btn-close:hover{
  transform:scale(1.3);
}

JavaScript

function btnClose(){   //按鈕關閉
	let wrap_div = event.target.closest("div");
  wrap_div.remove();
}