JSFiddle - React, Tailwind, and code Playground

HTML

<!-- JavaScript 系列三：練習1 ── alert 示警元件 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <div class="alert alert-primary">
            歡迎您點擊「抖內」按鈕，以實際行動支持我們。
            <button class="btn-close" onclick="closeAlert()">×</button>
          </div>
          <div class="alert alert-success">
            您已成功下訂單！以下為您的訂單詳細資訊。
            <button class="btn-close" onclick="closeAlert()">×</button>
          </div>
          <div class="alert alert-danger">
            抱歉，系統發生錯誤，請稍後重新嘗試。
            <button class="btn-close" onclick="closeAlert()">×</button>
          </div>
          <div class="alert alert-warning">
            請注意，以下內容包含「劇透」爆雷資訊。
            <button class="btn-close" onclick="closeAlert()">×</button>
          </div>
    </div>
      <script src="./index.js"></script>
</body>
</html>

CSS

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
#container{
    width: 500px;
    margin: 30px auto;
}
.alert{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-size: 18px;
    margin-bottom: 15px;
    transition: all 0.5s;
}

.alert:hover{
    transform: scale(1.1);
}

.alert-primary{
    border-top: 7px solid darkblue;
    background-color: rgba(0, 0, 139, 0.2);
}

.alert-success{
    border-top: 7px solid darkgreen;
    background-color: rgba(0, 100, 0, 0.3);
}

.alert-danger{
    border-top: 7px solid darkred;
    background-color: rgba(139, 0, 0, 0.3);
}

.alert-warning{
    border-top: 7px solid darkorange;
    background-color: rgba(255, 140, 0, 0.3);
}

.btn-close{
    font-size: 24px;
    border:0px;
    background-color: transparent;
    cursor: pointer;
}

JavaScript

function closeAlert(){
    let divBlock = event.target.closest('div');
    divBlock.remove();
}