Scroll Area

<ScrollArea className="h-64 w-full max-w-lg rounded-2xl border border-white/[0.08] bg-[#050811] p-5 shadow-2xl">
  <div className="flex items-center gap-2 mb-4 pb-3 border-b border-white/[0.06]">
    <Terminal className="h-4 w-4 text-cyan-400" />
    <span className="font-mono text-xs font-bold text-slate-200">SYSTEM_AUDIT_LOG.LOG</span>
    <Badge variant="neon" size="sm" className="ml-auto">LIVE</Badge>
  </div>
  <div className="space-y-3 font-mono text-xs text-slate-400">
    <p><span className="text-cyan-400">[00:14:02]</span> SYSTEM INITIALIZATION COMPLETE</p>
    <p><span className="text-cyan-400">[00:14:03]</span> KERNEL MODULES LOADED [HASH: 0x9AF2]</p>
    <p><span className="text-emerald-400">[00:14:05]</span> QUANTUM BUS SYNC ESTABLISHED: 10.4 GB/s</p>
    <p><span className="text-cyan-400">[00:14:08]</span> MOUNTING CRYPTOGRAPHIC VAULT: /dev/siber-sec</p>
    <p><span className="text-amber-400">[00:14:12]</span> HEURISTIC FIREWALL SCAN: NO ANOMALIES</p>
    <p><span className="text-cyan-400">[00:14:15]</span> NEURAL PROXY LISTENING ON PORT 9090</p>
    <p><span className="text-emerald-400">[00:14:19]</span> OPERATOR AUTHENTICATED: CLEARANCE_LEVEL_5</p>
    <p><span className="text-cyan-400">[00:14:22]</span> ALL SUB-SYSTEMS NOMINAL. READY FOR INPUT.</p>
  </div>
</ScrollArea>

<ScrollArea className="w-full whitespace-nowrap rounded-2xl border border-white/[0.08] bg-[#050811] p-4 shadow-xl">
  <div className="flex w-max space-x-4">
    {[
      { id: 'ALPHA-01', status: 'ACTIVE', load: '32%', color: 'cyan' },
      { id: 'BETA-02', status: 'SYNCING', load: '78%', color: 'amber' },
      { id: 'GAMMA-03', status: 'OPTIMAL', load: '14%', color: 'emerald' },
      { id: 'DELTA-04', status: 'OFFLINE', load: '0%', color: 'rose' },
      { id: 'EPSILON-05', status: 'ACTIVE', load: '56%', color: 'cyan' },
      { id: 'ZETA-06', status: 'OPTIMAL', load: '22%', color: 'emerald' },
    ].map((node) => (
      <div key={node.id} className="w-48 p-4 rounded-xl bg-[#080d1a] border border-white/[0.06] flex flex-col gap-2">
        <Row justify="between" align="center">
          <span className="font-mono text-xs font-bold text-slate-200">{node.id}</span>
          <Badge variant="primary-subtle" size="sm">{node.status}</Badge>
        </Row>
        <span className="text-[11px] font-mono text-slate-400">Load: {node.load}</span>
      </div>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

<div className="relative w-full max-w-xl p-6 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-3">
    <Row justify="between" align="center">
      <div className="flex items-center gap-2">
        <Radio className="h-4 w-4 text-cyan-400 animate-pulse" />
        <span className="font-mono text-sm font-bold text-white">QUANTUM_TELEMETRY_FEED</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">MONITORED</Badge>
    </Row>
    <ScrollArea className="h-48 w-full rounded-xl bg-black/40 border border-white/[0.06] p-4">
      <div className="space-y-2 font-mono text-xs text-slate-300">
        <p className="text-cyan-300">&gt; NODE_01: Quantum state coherency at 99.98%</p>
        <p className="text-slate-400">&gt; NODE_02: Entanglement pair verified (Qubit 482)</p>
        <p className="text-cyan-300">&gt; NODE_03: Synaptic clock rate synced with satellite GPS</p>
        <p className="text-violet-300">&gt; NODE_04: Encryption cipher rotation initiated</p>
        <p className="text-slate-400">&gt; NODE_05: Telemetry buffer flushed: 0 dropped packets</p>
        <p className="text-emerald-300">&gt; NODE_06: Zero anomalies across all active sectors</p>
      </div>
    </ScrollArea>
  </div>
  <BorderBeam variant="neon" size={120} duration={7} borderWidth={1.5} glow />
</div>

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-2xl">
  <CardContent className="p-6 space-y-4">
    <Row justify="between" align="center">
      <div className="flex items-center gap-2">
        <Shield className="h-5 w-5 text-cyan-400" />
        <span className="font-mono text-sm font-bold text-slate-100">DEFENSE_MATRIX_INTEL</span>
      </div>
      <Badge variant="neon" size="sm">ACTIVE</Badge>
    </Row>
    <ScrollArea className="h-36 rounded-lg bg-[#040711] border border-white/[0.04] p-3">
      <div className="space-y-2 text-xs font-mono text-slate-400">
        <p className="text-emerald-400">[SEC-01] Firewall state: Optimal</p>
        <p className="text-slate-400">[SEC-02] Inbound packets analyzed: 42,900</p>
        <p className="text-amber-400">[SEC-03] Port scan suppressed from 192.168.1.99</p>
        <p className="text-slate-400">[SEC-04] Cryptographic key rotation cycle: 12h</p>
      </div>
    </ScrollArea>
  </CardContent>
</Card>