JSFiddle - React, Tailwind, and code Playground

by johnny890118

HTML

<div class="alert alert-primary">
  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
  歡迎您點擊「抖內」按鈕，以實際行動支持我們。
  <button class="btn-close" onclick="myfunction()">×</button>
</div>
<hr>
<div class="alert alert-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
</svg>
  您已成功下訂單！以下為您的訂單詳細資訊。
  <button class="btn-close" onclick="myfunction()">×</button>
</div>
<hr>
<div class="alert alert-danger">
  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-exclamation-octagon" viewBox="0 0 16 16">
  <path d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z"/>
  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
</svg>
  抱歉，系統發生錯誤，請稍後重新嘗試。
  <button class="btn-close" onclick="myfunction()">×</button>
</div>
<hr>
<div class="alert alert-warning" onclick="myfunction()">
  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi...

CSS

.alert-primary {
  background-color: #cfe2ff;
  color: #084298;
  padding: 10px;
  border-left: solid 5px #084298;
}

.alert-primary .btn-close {
  color: #084298;
}

.alert-success {
  background-color: #d1e7dd;
  color: #0f5132;
  padding: 10px;
  border-left: solid 5px #0f5132;
}

.alert-success .btn-close {
  color: #0f5132;
}

.alert-danger {
  background-color: #f8d7da;
  color: #842029;
  padding: 10px;
  border-left: solid 5px #842029;
}

.alert-danger .btn-close {
  color: #842029;
}

.alert-warning {
  background-color: #ffecd5;
  color: #664d03;
  padding: 10px;
  border-left: solid 5px #664d03;
}

.alert-warning .btn-close {
  color: #664d03;
}

.btn-close {
  background-color: transparent;
  font-weight: bold;
  font-size: 20px;
  border-radius: 10px;
  border: hidden;
}

.btn-close:hover {
  background-color: white;
  color: red;
}

.alert {
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  width: 500px;
  margin: auto;
  align-items: center;
}

JavaScript

function myfunction() {
  event.target.parentElement.remove();
}