Sith/core/templates/core/base/notifications.jinja

<div id="quick-notifications"
     x-data="{
             messages: [
             {% if messages %}
               {% for message in messages %}
                 {
                 tag: '{{ message.tags }}',
                 text: '{{ message }}',
                 },
               {% endfor %}
             {% endif %}
             ]
             }"
     @quick-notification-add="(e) => messages.push(e?.detail)"
     @quick-notification-delete="messages = []">
  <template x-for="(message, index) in messages">
    <div class="alert" :class="`alert-${message.tag}`" x-transition>
      <span class="alert-main" x-text="message.text"></span>
      <span class="clickable" @click="messages = messages.filter((item, i) => i !== index)">
        <i class="fa fa-close"></i>
      </span>
    </div>
  </template>
</div>