Semantic Alert Set

<div class="nuda-ta2-semset">
  <div class="nuda-ta2-semset__row nuda-ta2-semset__row--info" role="status" aria-live="polite">
    <span class="nuda-ta2-semset__icon" aria-hidden="true">&#8505;</span>
    <span class="nuda-ta2-semset__text">A new version is available</span>
  </div>
  <div class="nuda-ta2-semset__row nuda-ta2-semset__row--success" role="status" aria-live="polite">
    <span class="nuda-ta2-semset__icon" aria-hidden="true">&#10003;</span>
    <span class="nuda-ta2-semset__text">Payment received</span>
  </div>
  <div class="nuda-ta2-semset__row nuda-ta2-semset__row--warning" role="status" aria-live="polite">
    <span class="nuda-ta2-semset__icon" aria-hidden="true">&#9888;</span>
    <span class="nuda-ta2-semset__text">Plan usage at 90%</span>
  </div>
  <div class="nuda-ta2-semset__row nuda-ta2-semset__row--error" role="alert" aria-live="assertive">
    <span class="nuda-ta2-semset__icon" aria-hidden="true">&#10071;</span>
    <span class="nuda-ta2-semset__text">Payment failed</span>
  </div>
</div>

.nuda-ta2-semset {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 250px;
  max-width: 300px;
}

.nuda-ta2-semset__row {
  display: flex;
  align-items: center;
  gap: .55rem;
  border-radius: 9px;
  border: 1px solid var(--bc);
  background: var(--bg);
  padding: .5rem .7rem;
  animation: _nuda-ta2semsetin .3s ease-out both;
}

.nuda-ta2-semset__row--info {
  --bc: rgba(96,165,250,.3);
  --bg: rgba(96,165,250,.08);
  animation-delay: 0s;
}

.nuda-ta2-semset__row--info .nuda-ta2-semset__icon {
  color: #60a5fa;
}

.nuda-ta2-semset__row--success {
  --bc: rgba(52,211,153,.3);
  --bg: rgba(52,211,153,.08);
  animation-delay: .06s;
}

.nuda-ta2-semset__row--success .nuda-ta2-semset__icon {
  color: #34d399;
}

.nuda-ta2-semset__row--warning {
  --bc: rgba(251,191,36,.35);
  --bg: rgba(251,191,36,.08);
  animation-delay: .12s;
}

.nuda-ta2-semset__row--warning .nuda-ta2-semset__icon {
  color: #fbbf24;
}

.nuda-ta2-semset__row--error {
  --bc: rgba(255,94,122,.35);
  --bg: rgba(255,94,122,.08);
  animation-delay: .18s;
}

.nuda-ta2-semset__row--error .nuda-ta2-semset__icon {
  color: #ff5e7a;
}

.nuda-ta2-semset__icon {
  flex-shrink: 0;
  font-size: .85rem;
  font-weight: 700;
}

.nuda-ta2-semset__text {
  color: #e6e6e6;
  font-size: .76rem;
}

@keyframes _nuda-ta2semsetin {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ta2-semset__row {
    animation: none;
  }
}