Flip Number Display

<div class="fc" id="fc"><span class="fc-d" data-d="0">0</span><span class="fc-d" data-d="0">0</span><span class="fc-d" data-d="0">0</span></div>
<button class="fc-btn" id="fcBtn">Randomize</button>

body{background:#0d1426;flex-direction:column;gap:22px}
.fc{display:flex;gap:8px}
.fc-d{width:54px;height:74px;border-radius:12px;background:#1a2540;color:#fff;font:800 44px/74px ui-monospace,monospace;text-align:center;overflow:hidden;position:relative}
.fc-d span{display:block;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.fc-btn{font:600 14px/1 system-ui,sans-serif;color:#fff;background:#ff477e;border:0;border-radius:10px;padding:11px 24px;cursor:pointer}

var digits=document.querySelectorAll('.fc-d');
function roll(){digits.forEach(function(d){var n=Math.floor(Math.random()*10);d.textContent=n})}
document.getElementById('fcBtn').onclick=roll;