AI Architecture Data Table

<div class="overflow-hidden shadow-cyan-900/5 group
  hover:border-cyan-500/30 transition-colors duration-500
  bg-zinc-950 border-white/10 border relative shadow-2xl">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');</style>
  <div class="absolute inset-0
    bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)]
    bg-[size:24px_24px] pointer-events-none"></div>
  <div class="absolute top-0 left-0 w-2 h-2 border-t border-l border-cyan-500/50"></div>
  <div class="absolute top-0 right-0 w-2 h-2 border-t border-r border-cyan-500/50"></div>
  <div class="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-cyan-500/50"></div>
  <div class="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-cyan-500/50"></div>
  <div class="px-6 py-4 border-b border-white/5 bg-zinc-900/80 flex items-center justify-between relative z-10">
    <div class="flex gap-1.5">
      <div class="w-2 h-2 bg-zinc-700"></div>
      <div class="w-2 h-2 bg-zinc-700"></div>
      <div class="w-2 h-2 bg-zinc-700"></div>
    </div>
    <div class="text-[10px] font-mono text-cyan-500/70 tracking-wider">Generated_Layout_Tree.json</div>
  </div>
  <div class="grid grid-cols-12 gap-4 px-6 py-3 border-b border-white/5
    bg-zinc-950/50 text-xs font-medium text-zinc-500 uppercase
    tracking-wider relative z-10
    font-['Inter','Helvetica_Neue',sans-serif]">
    <div class="col-span-5 pl-2 font-medium">Component</div>
    <div class="col-span-3 text-center font-medium">Type</div>
    <div class="col-span-2 text-center font-medium">Nodes</div>
    <div class="col-span-2 text-right font-medium">Size</div>
  </div>
  <div class="flex flex-col z-10 relative font-['Inter','Helvetica_Neue',sans-serif]">
    <div class="grid grid-cols-12 gap-4 px-6 py-4 border-b border-white/5
      items-center hover:bg-white/[0.02] transition-colors
      group/row">
      <div class="col-span-5 flex items-center gap-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-cyan-400">
          <path fill="currentColor" fill-rule="evenodd" d="M1 20.24c0-.42.344-.76.767-.76h20.466c.423 0 .767.34.767.76s-.344.76-.767.76H1.767A.764.764 0 0 1 1 20.24" clip-rule="evenodd"></path>
          <path fill="currentColor" d="M3.69 3.89c-.899.89-.899 2.324-.899 5.19v5.067c0 1.91 0 2.866.6 3.46c.599.593 1.564.593 3.493.593h10.233c1.93 0 2.894 0 3.493-.594c.6-.593.6-1.549.6-3.46V9.08c0-2.866 0-4.3-.9-5.19C19.412 3 17.965 3 15.07 3H8.93c-2.894 0-4.34 0-5.24.89" opacity=".5"></path>
        </svg>
        <span class="text-sm text-zinc-200 font-medium">Split Hero Section</span>
      </div>
      <div class="col-span-3 flex justify-center gap-1">
        <span class="px-1.5 py-0.5 bg-cyan-950/50 border border-cyan-500/20 text-[10px] text-cyan-300 font-medium">Layout</span>
        <span class="px-1.5 py-0.5 bg-blue-950/50 border border-blue-500/20 text-[10px] text-blue-300 font-medium">Flex</span>
      </div>
      <div class="col-span-2 flex items-center justify-center gap-2">
        <span class="text-xs text-zinc-400 font-medium">12</span>
        <div class="flex items-end gap-[1px] h-3">
          <div class="w-0.5 h-1.5 bg-cyan-500"></div>
          <div class="w-0.5 h-2.5 bg-cyan-500"></div>
          <div class="w-0.5 h-3 bg-cyan-500"></div>
          <div class="w-0.5 h-2 bg-cyan-500/30"></div>
        </div>
      </div>
      <div class="col-span-2 flex items-center justify-end gap-2">
        <div class="w-16 h-1 bg-zinc-800">
          <div class="w-[85%] h-full bg-cyan-400 shadow-[0_0_10px_rgba(34,211,238,0.5)]"></div>
        </div>
        <span class="text-xs text-zinc-400 w-4 text-right font-medium">2k</span>
      </div>
    </div>
    <div class="grid grid-cols-12 gap-4 px-6 py-4 border-b border-white/5
      items-center hover:bg-white/[0.02] transition-colors
      group/row">
      <div class="col-span-5 flex items-center gap-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-blue-400">
          <path fill="currentColor" d="M18.512 10.077c0 .738-.625 1.337-1.396 1.337s-1.395-.599-1.395-1.337c0-.739.625-1.338 1.395-1.338s1.396.599 1.396 1.338"></path>
          <path fill="currentColor" fill-rule="evenodd" d="M18.036 5.532c-1.06-.137-2.414-.137-4.123-.136h-3.826c-1.71 0-3.064 0-4.123.136c-1.09.14-1.974.437-2.67 1.104S2.29 8.149 2.142 9.195C2 10.21 2 11.508 2 13.147v.1c0 1.64 0 2.937.142 3.953c.147 1.046.456 1.892 1.152 2.559s1.58.963 2.67 1.104c1.06.136 2.414.136 4.123.136h3.826c1.71 0 3.064 0 4.123-.136c1.09-.14 1.974-.437 2.67-1.104s1.005-1.514 1.152-2.559C22 16.184 22 14.886 22 13.248v-.1c0-1.64 0-2.937-.142-3.953c-.147-1.046-.456-1.892-1.152-2.559s-1.58-.963-2.67-1.104" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm text-zinc-200 font-medium">Bento Feature Grid</span>
      </div>
      <div class="col-span-3 flex justify-center gap-1">
        <span class="px-1.5 py-0.5 bg-blue-950/50 border border-blue-500/20 text-[10px] text-blue-300 font-medium">Grid</span>
      </div>
      <div class="col-span-2 flex items-center justify-center gap-2">
        <span class="text-xs text-zinc-400 font-medium">24</span>
        <div class="flex items-end gap-[1px] h-3">
          <div class="w-0.5 h-2 bg-blue-500"></div>
          <div class="w-0.5 h-3 bg-blue-500"></div>
          <div class="w-0.5 h-1.5 bg-blue-500/30"></div>
          <div class="w-0.5 h-1 bg-blue-500/30"></div>
        </div>
      </div>
      <div class="col-span-2 flex items-center justify-end gap-2">
        <div class="w-16 h-1 bg-zinc-800">
          <div class="w-[60%] h-full bg-blue-500"></div>
        </div>
        <span class="text-xs text-zinc-400 w-4 text-right font-medium">1.5</span>
      </div>
    </div>
    <div class="grid grid-cols-12 gap-4 hover:bg-white/[0.02]
      transition-colors group/row border-white/5 border-b pt-4
      pr-6 pb-4 pl-6 gap-x-4 gap-y-4 items-center">
      <div class="col-span-5 flex items-center gap-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-sky-400">
          <circle cx="15" cy="6" r="3" fill="currentColor" opacity=".4"></circle>
          <ellipse cx="16" cy="17" fill="currentColor" opacity=".4" rx="5" ry="3"></ellipse>
          <circle cx="9.001" cy="6" r="4" fill="currentColor"></circle>
          <ellipse cx="9.001" cy="17.001" fill="currentColor" rx="7" ry="4"></ellipse>
        </svg>
        <span class="text-sm text-zinc-200 font-medium">Social Proof Carousel</span>
      </div>
      <div class="col-span-3 flex justify-center gap-1">
        <span class="px-1.5 py-0.5 bg-sky-950/50 border border-sky-500/20 text-[10px] text-sky-300 font-medium">Loop</span>
      </div>
      <div class="col-span-2 flex items-center justify-center gap-2">
        <span class="text-xs text-zinc-400 font-medium">8</span>
        <div class="flex items-end gap-[1px] h-3">
          <div class="w-0.5 h-1 bg-sky-500"></div>
          <div class="w-0.5 h-3 bg-sky-500"></div>
          <div class="w-0.5 h-3 bg-sky-500"></div>
          <div class="w-0.5 h-2 bg-sky-500"></div>
        </div>
      </div>
      <div class="col-span-2 flex items-center justify-end gap-2">
        <div class="w-16 h-1 bg-zinc-800">
          <div class="w-[40%] h-full bg-sky-500"></div>
        </div>
        <span class="text-xs text-zinc-400 w-4 text-right font-medium">1k</span>
      </div>
    </div>
  </div>
</div>