Componente Lightbox immagine

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <!-- Lightbox Container - Hidden by default, shown by JavaScript -->
  <!-- For this pure HTML/Tailwind example, we've structured it as if it were always visible -->
  <!-- In a real app, you'd toggle 'hidden' and 'opacity-0' classes with JS -->
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 dark:bg-opacity-90 transition-opacity duration-300" x-data="{ open: true }" x-show="open">
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 md:p-8 max-w-5xl w-full mx-4 sm:mx-6 lg:mx-8 transform transition-transform duration-300 scale-95 opacity-0" x-intersect:enter="$el.classList.remove('scale-95', 'opacity-0')" x-intersect:leave="$el.classList.add('scale-95', 'opacity-0')">
      <!-- Close Button -->
      <button class="absolute top-3 right-3 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200 focus:outline-none" aria-label="Close Lightbox" @click="open = false">
        <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 lg:gap-10">
        <!-- Image Section -->
        <div class="relative flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden shadow-inner">
          <img src="https://picsum.photos/1200/800?random=1" alt="Album Cover Art" class="max-h-[70vh] w-full object-contain rounded-md shadow-md hover:scale-105 transition-transform duration-300">
          <!-- Navigation Arrows (example, would be interactive with JS) -->
          <button class="absolute left-2 top-1/2 -translate-y-1/2 bg-black bg-opacity-40 hover:bg-opacity-60 text-white rounded-full p-2 focus:outline-none transition-colors duration-200" aria-label="Previous Image">
            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
          </button>
          <button class="absolute right-2 top-1/2 -translate-y-1/2 bg-black bg-opacity-40 hover:bg-opacity-60 text-white rounded-full p-2 focus:outline-none transition-colors duration-200" aria-label="Next Image">
            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </button>
        </div>

        <!-- Details Section -->
        <div class="flex flex-col justify-between text-gray-800 dark:text-gray-200">
          <div>
            <h2 class="text-3xl md:text-4xl font-extrabold mb-2 dark:text-white capitalize leading-tight" style="color: #0077B6;">Eternal Echoes</h2>
            <p class="text-lg md:text-xl font-semibold mb-4 dark:text-gray-300" style="color: #00B1A7;">Artist Name</p>

            <div class="bg-blue-50 dark:bg-gray-700/50 p-4 rounded-lg shadow-inner mb-6 border border-blue-100 dark:border-gray-600/50">
              <h3 class="text-xl font-bold mb-3 dark:text-white flex items-center" style="color: #0077B6;">
                <svg class="w-5 h-5 mr-2 text-blue-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10l2-2H4zm14 0l-2 2h-6l2-2h8zm0 6H4v2h14v-2z" clip-rule="evenodd"></path></svg>
                Album Details
              </h3>
              <ul class="text-sm md:text-base leading-relaxed">
                <li class="mb-1"><span class="font-medium dark:text-gray-300">Release Date:</span> <span class="dark:text-gray-400">October 26, 2023</span></li>
                <li class="mb-1"><span class="font-medium dark:text-gray-300">Genre:</span> <span class="dark:text-gray-400">Melodic Trance, Ambient</span></li>
                <li class="mb-1"><span class="font-medium dark:text-gray-300">Duration:</span> <span class="dark:text-gray-400">48:32</span></li>
                <li class="mb-1"><span class="font-medium dark:text-gray-300">Tracks:</span> <span class="dark:text-gray-400">12</span></li>
                <li class="mb-1"><span class="font-medium dark:text-gray-300">Label:</span> <span class="dark:text-gray-400">Harmonic Records</span></li>
              </ul>
            </div>

            <p class="text-sm md:text-base leading-relaxed mb-6 dark:text-gray-300" style="color: #333;">
              "Eternal Echoes" is a transcendent journey through soundscapes, blending intricate synthesizers with ethereal vocals. Each track is meticulously crafted, inviting the listener into a world of deep emotion and vibrant sonic textures.
            </p>

            <!-- Call to Actions -->
            <div class="flex flex-col sm:flex-row gap-4 mb-4">
              <button class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-emerald-500 shadow-md transform hover:scale-105 active:scale-95">
                <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
                Play Album
              </button>
              <button class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-blue-600 dark:border-emerald-600 text-base font-medium rounded-md text-blue-600 dark:text-emerald-600 bg-white hover:bg-blue-50 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-emerald-500 shadow-md transform hover:scale-105 active:scale-95">
                <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" /><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path></svg>
                Add to Playlist
              </button>
            </div>

            <!-- Social Share/Download Buttons -->
            <div class="flex flex-wrap gap-2 text-sm text-gray-600 dark:text-gray-400">
              <button class="flex items-center px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-full hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-1 focus:ring-gray-400" aria-label="Share on Twitter">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c1.329 0 2.6-.394 3.705-1.127l.1-.06c.038-.025.074-.05.11-.077c.36-.264.717-.551 1.056-.864s.642-.647.962-1.077c.606-.826 1.074-1.748 1.404-2.753a9.988 9.988 0 00.46-3.078c-.29-.028-.58-.04-.871-.04h-.002a9.988 9.988 0 00-3.14-.528c-1.393-.11-2.775-.02-4.103.26a9.988 9.988 0 00-2.887 1.079c-.06.027-.119.052-.178.077-.32.13-.63.266-.928.406-.296.14-.576.284-.836.435-.55.32-.98.66-1.295 1.018-.314.357-.597.74-.83 1.15-.386.67-.655 1.39-.798 2.152-.137.76-.14 1.54-.012 2.306.096.654.26 1.28.49 1.87.234.59.508 1.16.828 1.7L4.76 21.05c.877-1.18 1.944-2.188 3.167-3.02C8.75 17 9 17.02 9 17.02l-.21.002zM15.545 2.378l.006.004c.002-.008.004-.017.006-.025s.005-.015.007-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022l.006.004c.002-.008.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022l.006.004a.2.2 0 00.28-.277c-.004-.008-.008-.015-.012-.022a.2.2 0 00-.28-.277A9.988 9.988 0 0015.545 2.378zM17 1H7c-.552 0-1 .448-1 1s.448 1 1 1h10c.552 0 1-.448 1-1s-.448-1-1-1z"/></svg>
                Share
              </button>
              <button class="flex items-center px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-full hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-1 focus:ring-gray-400" aria-label="Download Album">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                Download
              </button>
              <button class="flex items-center px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-full hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-1 focus:ring-gray-400" aria-label="Add to Favorites">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.657l1.172-1.172a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                Favorite
              </button>
            </div>

          </div>

          <!-- Artist Avatar & Name -->
          <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Artist Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-orange-400 dark:border-purple-600 shadow-md">
            <div>
              <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Created by</p>
              <p class="text-lg font-bold dark:text-white" style="color: #A020F0;">Alex "Sonic" Turner</p>
            </div>
          </div>

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

<!-- Alpine.js is used for demonstration of interactivity. In a pure HTML example, this would be handled by a full JS framework. -->
<!-- Include Alpine.js for x-data, x-show, x-intersect:enter, x-intersect:leave, @click functionality -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>