Split Code Viewer with Blurred Hidden Pane

<div class="relative ring-1 ring-inset ring-white/5 overflow-hidden bg-neutral-900/60 border-white/10 border rounded-2xl">
      <div class="absolute left-3 top-3 z-10">
        
      </div>
      <div class="absolute right-3 top-3 z-10">
        
      </div>
      <div class="relative h-56">
        <!-- left code area -->
        <div class="absolute inset-y-0 left-0 w-1/2 bg-neutral-950/70">
          <div class="h-full p-4">
            <div class="rounded-lg bg-neutral-900/80 border border-white/10 h-full overflow-hidden">
              <div class="px-3 py-2 border-b border-white/10 flex items-center gap-2">
                <span class="h-3 w-3 rounded-full bg-red-500/70"></span>
                <span class="h-3 w-3 rounded-full bg-yellow-400/70"></span>
                <span class="h-3 w-3 rounded-full bg-green-500/70"></span>
                
              </div>
              <div class="p-3 text-[11px] leading-relaxed font-medium">
                <pre class="text-[11px] text-neutral-300"><code class="">// Fetch data, keep private
import axios from 'axios';

async function fetchUserData(userId) {
  const resp = await axios.get('/api/users/' + userId);
  return resp.data;
}</code></pre>
              </div>
            </div>
          </div>
        </div>
        <!-- split handle -->
        <div class="absolute inset-y-0 left-1/2 w-[1px] bg-white/10"></div>
        <div class="absolute inset-y-0 left-1/2 -translate-x-1/2 flex items-center">
          
        </div>
        <!-- right blurred area -->
        <div class="absolute inset-y-0 right-0 w-1/2 bg-neutral-900/50">
          <div class="h-full p-4">
            <div class="rounded-lg border border-white/10 h-full bg-gradient-to-b from-neutral-900/60 to-neutral-900/30 backdrop-blur">
              <div class="h-full flex items-center justify-center">
                <div class="text-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="lock" class="lucide lucide-lock w-[26px] h-[26px] text-neutral-400 mx-auto" data-icon-replaced="true" style="width: 26px; height: 26px; color: rgb(163, 163, 163);"><rect width="18" height="11" x="3" y="11" rx="2" ry="2" class=""></rect><path d="M7 11V7a5 5 0 0 1 10 0v4" class=""></path></svg>
                  <p class="text-xs text-neutral-400 mt-1">Hidden</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="px-4 py-3 border-t border-white/10 flex items-center gap-2 text-xs text-neutral-400">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
          <path d="M3 3l18 18" class=""></path>
          <rect x="4" y="4" width="16" height="12" rx="1" class=""></rect>
        </svg>
        <span class="truncate">Never appears in shared recordings</span>
      </div>
    </div>