Componente de caja de luz de imagen

<div class="font-mono bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-lime-300 min-h-screen p-4 flex items-center justify-center">
  <div class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50" id="lightbox-overlay">
    <div class="relative bg-gray-900 border border-lime-600 shadow-lg shadow-lime-900/50 rounded-lg overflow-hidden max-w-5xl w-full mx-auto p-4 md:p-8 transform transition-all duration-300 scale-95 opacity-0" id="lightbox-content">
      <!-- Close Button -->
      <button class="absolute top-2 right-2 text-lime-400 hover:text-lime-200 text-2xl font-bold p-2 focus:outline-none focus:ring-2 focus:ring-lime-500 rounded-lg z-10" onclick="document.getElementById('lightbox-overlay').classList.add('hidden'); document.getElementById('lightbox-content').classList.remove('scale-100', 'opacity-100');" aria-label="Close Lightbox">
        &times;
      </button>

      <!-- Lightbox Header -->
      <div class="flex items-center justify-between border-b pb-4 mb-4 border-dashed border-gray-700/50">
        <h2 class="text-xl md:text-2xl text-lime-400 font-bold tracking-tight uppercase flex items-center">
          <svg class="w-6 h-6 mr-2 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.25 12L12.5 17L15 12L17.25 17M21 12H3M21 16H3M21 8H3M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
          <span class="text-orange-400">BLOCK</span><span class="text-cyan-400">SYNCH</span>_TX_VIEW
        </h2>
        <div class="flex items-center space-x-2 text-sm text-gray-500 hidden md:flex">
          <span class="text-yellow-400">STATUS:</span> <span class="text-green-500">ACTIVE</span>
          <span class="text-cyan-400">|</span>
          <span class="text-pink-400">LOGGED:</span> <span class="text-white">0xDEADBEEF...</span>
        </div>
      </div>

      <div class="flex flex-col lg:flex-row gap-4 lg:gap-8">
        <!-- Image Area -->
        <div class="relative flex-1 bg-gray-800 border border-gray-700 rounded-md overflow-hidden flex items-center justify-center p-2">
          <img src="https://picsum.photos/1024/768?random=1" alt="Blockchain Transaction Visual" class="max-h-[calc(100vh-200px)] object-contain rounded-sm" id="lightbox-image">
          <!-- Navigation Buttons -->
          <button class="absolute left-2 top-1/2 -translate-y-1/2 p-3 bg-gray-700/70 text-lime-400 hover:bg-gray-600/90 rounded-full focus:outline-none focus:ring-2 focus:ring-lime-500 transition shadow-lg" aria-label="Previous Image">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
          </button>
          <button class="absolute right-2 top-1/2 -translate-y-1/2 p-3 bg-gray-700/70 text-lime-400 hover:bg-gray-600/90 rounded-full focus:outline-none focus:ring-2 focus:ring-lime-500 transition shadow-lg" aria-label="Next Image">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Details and Description -->
        <div class="lg:w-1/3 flex flex-col space-y-4 text-sm">
          <div class="bg-gray-800 p-4 border border-gray-700 rounded-md">
            <h3 class="text-lg font-bold text-lime-400 mb-2 border-b border-dashed border-gray-700 pb-2">[IMAGE:001] DETAILS</h3>
            <p class="text-gray-400"><strong class="text-cyan-400">FILE_ID:</strong> <span class="text-orange-300">TXN_A7F3C8_VISUAL</span></p>
            <p class="text-gray-400"><strong class="text-cyan-400">TYPE:</strong> <span class="text-purple-300">BLOCK_CHAIN_GRAPH</span></p>
            <p class="text-gray-400"><strong class="text-cyan-400">STATUS:</strong> <span class="text-green-400">CONFIRMED</span></p>
            <p class="text-gray-400"><strong class="text-cyan-400">SIZE:</strong> <span class="text-yellow-300">1.2 MB</span></p>
            <p class="text-gray-400"><strong class="text-cyan-400">RESOLUTION:</strong> <span class="text-red-300">1024x768</span></p>
          </div>

          <div class="bg-gray-800 p-4 border border-gray-700 rounded-md flex-grow">
            <h3 class="text-lg font-bold text-lime-400 mb-2 border-b border-dashed border-gray-700 pb-2">DESCRIPTION</h3>
            <p class="text-gray-300 leading-relaxed" id="lightbox-description">
              SYNCHRONIZED_BLOCK_TRANSACTION_VISUALIZATION. Depicts the flow of data across a distributed ledger network. Identifiers are obfuscated for security protocols. Genesis block indicated by <span class="text-green-500">GREEN_NODE</span>. Current chain state validated. ERROR_RATE: <span class="text-red-400">0.00%</span>.
            </p>
            <p class="text-gray-500 mt-4 text-xs italic">Access Log: <span class="text-yellow-400">2023-10-27 10:30:45 UTC</span></p>
          </div>

          <div class="bg-gray-800 p-4 border border-gray-700 rounded-md">
            <h3 class="text-lg font-bold text-lime-400 mb-2 border-b border-dashed border-gray-700 pb-2">OPERATOR PROFILE</h3>
            <div class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-10 h-10 rounded-full border-2 border-lime-500">
              <div>
                <p class="text-lime-300 font-bold">AGENT_0x7FFE</p>
                <p class="text-gray-400 text-sm">ROLE: SYSTEM_AUDITOR</p>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <!-- Sample trigger element (hidden as the lightbox starts open for demonstration) -->
  <button onclick="document.getElementById('lightbox-overlay').classList.remove('hidden'); document.getElementById('lightbox-content').classList.add('scale-100', 'opacity-100');" class="px-6 py-3 bg-lime-700 text-white rounded-md hover:bg-lime-600 focus:outline-none focus:ring-2 focus:ring-lime-500 hidden">
    Open Lightbox
  </button>

  <script>
    // This is a minimal JS for demonstration of initial state and closing. 
    // Full lightbox functionality (e.g., image loading, nav) would require more JS.
    document.addEventListener('DOMContentLoaded', () => {
      const lightboxOverlay = document.getElementById('lightbox-overlay');
      const lightboxContent = document.getElementById('lightbox-content');

      // Make the lightbox visible on page load for immediate demonstration
      lightboxOverlay.classList.remove('hidden');
      setTimeout(() => {
        lightboxContent.classList.add('scale-100', 'opacity-100');
      }, 50); // Small delay for the transition effect
    });
  </script>
</div>