Toast Stack

<!-- Toast Stack · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="tst"><button class="tst-btn">Toon melding</button><div class="tst-zone"></div></div>
</div>

/* Toast Stack · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.tst{width:360px;display:flex;flex-direction:column;align-items:center;gap:14px;font-family:'Switzer',sans-serif}
.tst-btn{padding:10px 18px;border:0;border-radius:11px;background:#0a0a0a;color:#fff;font-weight:600;font-size:14px;cursor:pointer}
.tst-zone{width:100%;display:flex;flex-direction:column;gap:8px;min-height:60px}
.tst-toast{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(10,10,10,.12);border-left:3px solid #F5480F;border-radius:11px;padding:11px 14px;box-shadow:0 10px 24px -16px rgba(10,10,10,.5);opacity:0;transform:translateY(-8px) scale(.97);transition:.3s}
.tst-toast.in{opacity:1;transform:none}.tst-toast.out{opacity:0;transform:translateX(20px)}
.tst-ic{width:22px;height:22px;flex:none;border-radius:50%;background:rgba(245,72,15,.12);display:grid;place-items:center;color:#F5480F;font-weight:700;font-size:13px}
.tst-tx b{font-size:13px;color:#0a0a0a;display:block}.tst-tx span{font-size:11px;color:rgba(10,10,10,.55)}

// Toast Stack · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.tst')||root;var btn=root.querySelector('.tst-btn'),zone=root.querySelector('.tst-zone');var msgs=[['Opgeslagen','Wijzigingen bewaard.'],['Verzonden','E-mail is verstuurd.'],['Klaar','Build voltooid.']];var n=0;btn.addEventListener('click',function(){var m=msgs[n++%msgs.length];var t=document.createElement('div');t.className='tst-toast';t.innerHTML='<span class="tst-ic">!</span><div class="tst-tx"><b>'+m[0]+'</b><span>'+m[1]+'</span></div>';zone.prepend(t);while(zone.children.length>3)zone.lastChild.remove();requestAnimationFrame(function(){t.classList.add('in');});setTimeout(function(){t.classList.add('out');setTimeout(function(){t.remove();},300);},3200);});
}
init(document.querySelector('.jouw-container'));