JSFiddle - React, Tailwind, and code Playground

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>

SCSS

$primary-color: #e6effa;
$primary-border-color: #bcd4ee;
$success-color: #eaf7ee;
$success-border-color: #c9e4d0;
$danger-color: #fcede9;
$danger-border-color: #f2ded9;
$warning-color: #fef7ea;
$warning-border-color: #fde8c8;

* {
  box-sizing: border-box;
  
}

.alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 500px;
  margin: 0 auto;
  height: 2.5rem;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 18px;
  
  &-primary {
    background-color: $primary-color;
    border: 2px solid $primary-border-color;
  }
  
  &-success {
    background-color: $success-color;
    border: 2px solid $success-border-color;
  }
  
  &-danger {
    background-color: $danger-color;
    border: 2px solid $danger-border-color;
  }
  
  &-warning {
    background-color: $warning-color;
    border: 2px solid $warning-border-color;
  }
  
  .btn-close {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px;
    border-radius: 8px;
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.7);
    }
  }
}

JavaScript

const closeButtons = document.querySelectorAll('.btn-close');

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

for(let closeButton of closeButtons) {
	closeButton.onclick = removeAlert;
}