radioボタンと:has()だけで作るタブUI。JSなしでパネルが切り替わり、キーボードの矢印キー操作もradio標準のまま使えます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
タブの状態はradioボタンが持ちます。:has() が使える現在は「.tabs:has(#tab-a:checked) .panel-a」のように、コンテナ起点で選択中のタブに対応するパネルだけを display: block にできるため、旧来の「inputとpanelを兄弟に並べる」HTML構造の制約から自由になりました。radioなのでタブ間の移動は矢印キーがそのまま効きます。
本格的なタブにはrole="tablist"とJSでのフォーカス管理が推奨されます（WAI-ARIA準拠）。この方式は設定画面など軽量な表示切り替え向けです。
JSを使わないCSSのみのタブUIを作ってください。radioボタンで状態を持ち、:has()を使ってコンテナ起点で選択中のラベルの強調とパネルの表示を切り替えてください。フォーカスリングも付けてください。