Stacking Toast Queue

<button class="tq-btn" id="tqBtn">Add to queue</button>
<div class="tq" id="tq"></div>

body{background:#f6f7fa}
.tq-btn{font:600 14px/1 system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#ff7a18,#ff477e);border:0;border-radius:10px;padding:12px 22px;cursor:pointer}
.tq{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:10px}
.tq-item{background:#1a1f36;color:#fff;padding:13px 18px;border-radius:12px;font:600 14px/1 system-ui,sans-serif;display:flex;align-items:center;gap:10px;transform:translateX(120%);transition:transform .4s cubic-bezier(.5,0,.2,1),opacity .3s;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.tq-item.in{transform:none}
.tq-item .d{width:8px;height:8px;border-radius:50%;background:#16a34a}

var tq=document.getElementById('tq'),i=0;
document.getElementById('tqBtn').onclick=function(){i++;var el=document.createElement('div');el.className='tq-item';el.innerHTML='<span class="d"></span>Item #'+i+' queued';tq.appendChild(el);requestAnimationFrame(function(){el.classList.add('in')});setTimeout(function(){el.style.opacity='0';el.style.transform='translateX(120%)';setTimeout(function(){el.remove()},400)},2600)};