コードブロック(コピー機能付き)

<div class="d06-02-11-wrap">
          <div class="d06-02-11-bar">
            <span class="d06-02-11-dots"><i></i><i></i><i></i></span>
            <span class="d06-02-11-lang">CSS</span>
            <button class="d06-02-11-copy" type="button">コピー</button>
          </div>
          <pre class="d06-02-11-code"><code><span class="d06-02-11-sel">.card</span> {
  <span class="d06-02-11-prop">border-radius</span>: <span class="d06-02-11-val">12px</span>;
  <span class="d06-02-11-prop">box-shadow</span>: <span class="d06-02-11-val">0 4px 12px rgba(0,0,0,.08)</span>;
}</code></pre>
        </div>

.prev.d06-02-11{padding:0;display:block}
        .d06-02-11-wrap{height:260px;display:flex;flex-direction:column;background:#1e1f2b}
        .d06-02-11-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#2a2b3a;flex:0 0 auto}
        .d06-02-11-dots{display:flex;gap:5px}
        .d06-02-11-dots i{width:9px;height:9px;border-radius:50%;background:#4a4c5e;display:block}
        .d06-02-11-lang{margin-left:4px;font-size:11px;color:#8b8fa3;font-weight:700}
        .d06-02-11-copy{margin-left:auto;font-size:11px;font-weight:700;color:#c7c9d9;background:#3a3c4e;border:none;border-radius:6px;padding:5px 12px;cursor:pointer;transition:background .2s,color .2s}
        .d06-02-11-copy:hover{background:#4a4c5e}
        .d06-02-11-copy.d06-02-11-done{background:#2fa85e;color:#fff}
        .d06-02-11-code{flex:1;margin:0;padding:16px 18px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.8;color:#d7d9e6}
        .d06-02-11-sel{color:#7dd3fc}
        .d06-02-11-prop{color:#c4b5fd}
        .d06-02-11-val{color:#86efac}

(function(){
        var root=document.getElementById('item-06-02-11');if(!root)return;
        var btn=root.querySelector('.d06-02-11-copy'),code=root.querySelector('.d06-02-11-code');
        btn.addEventListener('click',function(){
          var text=code.textContent;
          function done(){
            var orig=btn.textContent;btn.textContent='コピーしました';btn.classList.add('d06-02-11-done');
            setTimeout(function(){btn.textContent=orig;btn.classList.remove('d06-02-11-done');},1600);
          }
          if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(text).then(done,done);}else{done();}
        });
      })();