JSFiddle - React, Tailwind, and code Playground

by wimp9487

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>

CSS

.alert {
  border:1px solid black;
  border-radius:100px;
  display:flex;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 20px;;
}
.alert:hover {
    transform: scale(1.1);
}
.alert > button {
  border:none;
  background-color: transparent;
  font-size: 20px;;
}
.alert-primary {
  color:green;
}
.alert-success {
  color:blue;
}
.alert-danger {
  color:red;
}
.alert-warning {
  color:orange;
}