Composants Boîte lumineuse d’image Composant Lightbox d’image
Composant Lightbox d’image

Un composant de lightbox d’image complexe et réactif avec un design inspiré du papier/de l’impression, une palette de couleurs aux tons de bijou et une prise en charge du mode sombre, adapté aux plates-formes musicales/audio. Il comporte de riches éléments interactifs.
Aperçu

HTML Code

<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>
Composants associés

Composant Lightbox d’image

Un composant de lightbox d’image réactif avec un design Skeuomorphism, des couleurs vives et la prise en charge du mode sombre, construit avec Tailwind CSS. Pas de JavaScript pour des performances améliorées.
Ouvrir
Composant Lightbox d’image

Un composant de boîte lumineuse d’image simple, réactif, de style glassmorphism, avec des tons océan/bleu pour les médias sociaux, prenant en charge le mode sombre.
Ouvrir
Boîte lumineuse d’image skeuomorphe

Un composant de lightbox d’image réactif avec un design skeuomorphe en niveaux de gris pour les portfolios, prenant en charge le mode sombre.
Ouvrir