Code Block with Copy

<div class="cb">
  <div class="cb-head"><span class="cb-dot r"></span><span class="cb-dot y"></span><span class="cb-dot g"></span><span class="cb-lang">javascript</span><button class="cb-copy" id="cbCopy"><svg viewBox="0 0 24 24" width="15" height="15"><rect x="9" y="9" width="11" height="11" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M5 15V5a2 2 0 012-2h10" fill="none" stroke="currentColor" stroke-width="2"/></svg><span>Copy</span></button></div>
  <pre id="cbCode"><span class="k">const</span> sum = (a, b) => a + b;
<span class="k">const</span> nums = [1, 2, 3, 4];
<span class="k">const</span> total = nums.<span class="f">reduce</span>(sum, 0);
<span class="c">// total === 10</span></pre>
</div>

*{box-sizing:border-box}
.cb{width:420px;max-width:100%;border-radius:14px;overflow:hidden;background:#0d1426;box-shadow:0 16px 40px rgba(10,15,30,.35);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cb-head{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#0a0f1c;border-bottom:1px solid #1c2740}
.cb-dot{width:11px;height:11px;border-radius:50%}.cb-dot.r{background:#ff5f57}.cb-dot.y{background:#febc2e}.cb-dot.g{background:#28c840}
.cb-lang{margin-left:6px;color:#5b6680;font-size:12px}
.cb-copy{margin-left:auto;display:flex;align-items:center;gap:6px;background:#1a2540;border:0;color:#9fb0d0;padding:6px 11px;border-radius:8px;cursor:pointer;font-size:12px;font-family:system-ui,sans-serif;transition:.2s}
.cb-copy:hover{background:#24345a;color:#fff}
.cb-copy.done{background:#16a34a;color:#fff}
.cb pre{margin:0;padding:18px;color:#c8d3e8;font-size:13.5px;line-height:1.7;overflow:auto}
.cb .k{color:#ff7b9c}.cb .f{color:#7dd3fc}.cb .c{color:#5b6680;font-style:italic}

var btn=document.getElementById('cbCopy'),code=document.getElementById('cbCode');
btn.onclick=function(){
  var text=code.innerText;
  navigator.clipboard.writeText(text).then(function(){
    btn.classList.add('done');btn.querySelector('span').textContent='Copied!';
    setTimeout(function(){btn.classList.remove('done');btn.querySelector('span').textContent='Copy'},1600);
  });
};