Notification Card

1<template>
2  <transition name="fade">
3    <div v-if="show" class="note">
4      <div class="dot">✓</div>
5      <div class="txt"><strong>Gespeichert</strong><span>Deine Änderungen sind live.</span></div>
6      <button class="x" @click="show=false" aria-label="Schließen">×</button>
7    </div>
8  </transition>
9</template>
10<script>
11export default { data: () => ({ show: true }) }
12</script>
13<style>
14.note{display:flex;align-items:center;gap:12px;width:320px;padding:14px 16px;border-radius:16px;
15  border:1px solid rgba(52,211,153,.25);background:rgba(16,185,129,.08);font-family:system-ui}
16.dot{display:flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:50%;
17  background:#10b981;color:#fff;font-weight:700;flex-shrink:0}
18.txt{display:flex;flex-direction:column;flex:1}
19.txt strong{color:#fff;font-size:14px}
20.txt span{color:rgba(255,255,255,.6);font-size:13px}
21.x{border:0;background:none;color:rgba(255,255,255,.5);font-size:22px;cursor:pointer;line-height:1}
22.fade-enter-active,.fade-leave-active{transition:opacity .3s,transform .3s}
23.fade-enter-from,.fade-leave-to{opacity:0;transform:translateY(-8px)}
24</style>