コードスニペット横の「コピー」ボタン。押すと2秒間「コピーしました」に変わり、色でも完了を伝えるマイクロインタラクションです。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
navigator.clipboard.writeText でコピーし、成功・失敗にかかわらずボタンの文言と色を2秒間切り替えて結果を伝えます。色だけでなく文言も変えるのは、色覚特性のあるユーザーにも伝わるようにするためです。transition を background-color 等に限定しているので、切り替えがなめらかに見えます。
このプレビューのサンドボックス内ではクリップボードAPIがブロックされるため表示切り替えのみ動きます。実サイトではHTTPS（またはlocalhost）が必要です。
コードブロック横に置くコピーボタンを作ってください。navigator.clipboardでコピーし、2秒間「コピーしました」と文言と背景色が変わるフィードバック付き。クリップボードが使えない環境でも落ちないようにtry-catchしてください。