Rechercher des composants

Catégories

Composants Intégration des médias

Intégration des médias

Contenu intégré provenant de sources externes telles que YouTube ou Vimeo

Composant d’intégration multimédia - Sports/Fitness

Un composant multimédia réactif et minimaliste pour les applications de sport/fitness, avec des couleurs vives, une typographie forte et une mise en page basée sur une grille. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-zinc-800 rounded-lg shadow-xl overflow-hidden
              border-l-8 border-r-8 border-teal-500 dark:border-teal-400
              grid grid-cols-1 md:grid-cols-2 gap-0">

    <!-- Left Section: Video Embed / Image Placeholder -->
    <div class="relative bg-zinc-200 dark:bg-zinc-950 aspect-video md:aspect-auto md:h-full overflow-hidden flex items-center justify-center">
      <!-- Placeholder for Video Embed (e.g., YouTube iframe) -->
      <!-- For demonstration, using an image. In a real app, replace with iframe. -->
      <img src="https://picsum.photos/800/600?random=1" alt="Sports action highlight" class="w-full h-full object-cover opacity-90">
      <div class="absolute inset-0 bg-gradient-to-t from-teal-600/50 to-purple-600/50 flex items-center justify-center">
        <button class="p-4 rounded-full bg-white/20 hover:bg-white/30 text-white transition-all transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-white/40">
          <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Right Section: Details and Call to Action -->
    <div class="p-6 sm:p-8 md:p-10 flex flex-col justify-between">
      <div>
        <h3 class="text-xs font-bold uppercase tracking-widest text-teal-600 dark:text-teal-400 mb-2">
          Match Highlights
        </h3>
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-zinc-900 dark:text-white leading-tight mb-4">
          Unstoppable Victory: <span class="text-purple-600 dark:text-purple-400">Championship Decider!</span>
        </h2>
        <p class="text-zinc-600 dark:text-zinc-300 text-sm sm:text-base leading-relaxed mb-6">
          Relive the most exciting moments from the final match of the season. Featuring incredible plays, game-winning shots, and emotional celebrations. Don't miss a second!
        </p>

        <div class="flex items-center space-x-4 mb-6">
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Coach Avatar" class="w-12 h-12 rounded-full ring-2 ring-teal-500 dark:ring-teal-400">
          <div>
            <p class="text-zinc-900 dark:text-white font-semibold text-lg">Coach Marcus "The General" Reed</p>
            <p class="text-zinc-500 dark:text-zinc-400 text-sm">Team Strategist & Analyst</p>
          </div>
        </div>
      </div>

      <div class="mt-8 md:mt-0">
        <p class="text-zinc-500 dark:text-zinc-400 text-xs sm:text-sm font-medium uppercase tracking-wider mb-3">
          Aired: September 28, 2023 | Runtime: 12:35
        </p>
        <a href="#" class="inline-flex items-center justify-center w-full sm:w-auto px-6 py-3 rounded-lg
           bg-gradient-to-r from-teal-500 to-purple-600 text-white text-lg font-bold uppercase tracking-wide
           shadow-lg shadow-purple-500/30 dark:shadow-purple-700/40
           hover:from-teal-600 hover:to-purple-700
           transform hover:-translate-y-1 transition-all duration-300 ease-in-out
           focus:outline-none focus:ring-4 focus:ring-purple-500/50">
          <svg class="w-6 h-6 mr-3 -ml-1" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
          </svg>
          Watch Full Match Replay
        </a>
      </div>
    </div>

  </div>
</div>

Composant d’intégration de média

Un composant multimédia complexe et réactif pour la consommation de blog/contenu, avec un design organique/inspiré de la nature, des tons de bijoux et la prise en charge du mode sombre. Comprend un lecteur vidéo, le contenu de l’article et les médias associés.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-slate-900 dark:to-teal-950 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto rounded-3xl overflow-hidden shadow-2xl relative bg-white dark:bg-gray-800 border border-emerald-200 dark:border-teal-700 backdrop-blur-sm bg-opacity-90 dark:bg-opacity-90">
    <!-- Organic Top Shape -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
      <svg class="w-full h-full" viewBox="0 0 1440 600" preserveAspectRatio="none">
        <path fill="url(#flowyGradient)" d="M0,224C0,224,374.8,2.7,720,0c345.2,-2.7,720,224,720,224L1440,600L0,600L0,224Z"></path>
        <defs>
          <linearGradient id="flowyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#34D399" />
            <stop offset="100%" stop-color="#10B981" />
          </linearGradient>
        </defs>
      </svg>
    </div>

    <div class="relative z-10 p-6 sm:p-8 md:p-10 lg:p-12 grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- Main Content Area -->
      <div class="lg:col-span-2 space-y-8">
        <!-- Video Embed Area -->
        <div class="relative pb-[56.25%] h-0 rounded-2xl overflow-hidden shadow-xl border border-emerald-300 dark:border-teal-600 transform scale-[0.99] hover:scale-100 transition-transform duration-300 ease-in-out">
          <iframe class="absolute top-0 left-0 w-full h-full rounded-2xl" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=WpIK1mX4qIK0wK2X" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>

        <!-- Article Details & Content -->
        <article class="space-y-6 text-lg leading-relaxed">
          <header class="space-y-4">
            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-emerald-800 dark:text-emerald-300 capitalize tracking-tight leading-snug">
              The Serene Dance of Emerald Forests
            </h1>
            <div class="flex items-center space-x-4 text-emerald-600 dark:text-teal-400 text-sm">
              <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full object-cover border-2 border-emerald-400 dark:border-teal-500 shadow-md"/>
                <span>By Sarah Green</span>
              </div>
              <span>•</span>
              <span>October 26, 2023</span>
              <span>•</span>
              <span>8 min read</span>
            </div>
          </header>

          <p class="text-gray-700 dark:text-gray-300 first-letter:text-5xl first-letter:font-bold first-letter:float-left first-letter:mr-3 first-letter:text-emerald-700 dark:first-letter:text-teal-400">
            In the heart of ancient lands, where the veil between worlds thins, lies a realm of unparalleled beauty – the Emerald Forests. Here, sunlight filters through a canopy of vibrant leaves, painting the forest floor in shifting patterns of gold and green. The air is thick with the scent of damp earth and blooming wildflowers, carried on a gentle breeze that whispers secrets through the rustling foliage.
          </p>
          <p class="text-gray-700 dark:text-gray-300">
            Towering trees, their roots deeply intertwined, form natural cathedrals. Moss-covered rocks, worn smooth by centuries of rain, punctuate crystal-clear streams that meander through the landscape, their murmuring currents a soothing melody. This verdant sanctuary is a testament to nature's enduring power and delicate balance, a symphony of life playing out in vibrant hues.
          </p>
          <blockquote class="p-4 border-l-4 border-emerald-500 dark:border-teal-400 text-gray-700 dark:text-gray-300 italic rounded-r-lg bg-emerald-50 dark:bg-teal-900 shadow-inner">
            "Nature does not hurry, yet everything is accomplished." – Lao Tzu
          </blockquote>
          <p class="text-gray-700 dark:text-gray-300">
            From the smallest beetle scuttling through fallen leaves to the majestic deer grazing in sun-dappled clearings, every creature plays a vital role in this thriving ecosystem. Birds with plumage like living jewels flit between branches, their songs echoing through the silence, adding to the immersive experience. It's a place where time slows, allowing one to truly connect with the rhythms of the earth.
          </p>
          <h2 class="text-2xl sm:text-3xl font-bold text-emerald-700 dark:text-emerald-400 mt-8 mb-4">The Flow of Life's Energies</h2>
          <p class="text-gray-700 dark:text-gray-300">
            The very essence of the Emerald Forests is its flow – the cyclical dance of growth and decay, the ceaseless movement of water and air, the interconnectedness of all living things. This natural rhythm inspires a sense of profound peace and understanding, reminding us of our own place within the grand tapestry of existence. Observing the intricate patterns of a fern, or the graceful bend of a willow by a stream, reveals lessons in resilience and adaptation.
          </p>
        </article>
      </div>

      <!-- Sidebar Area -->
      <aside class="space-y-8">
        <!-- Related Content -->
        <section class="bg-emerald-50 dark:bg-gray-900 p-6 rounded-2xl shadow-lg border border-emerald-200 dark:border-teal-700 transform hover:scale-[1.01] transition-transform duration-300 ease-out">
          <h2 class="text-xl font-bold mb-4 text-emerald-700 dark:text-emerald-400">More from Nature's Embrace</h2>
          <ul class="space-y-4">
            <li class="flex items-center space-x-4 border-b pb-4 last:border-b-0 last:pb-0 border-emerald-200 dark:border-teal-800">
              <img src="https://picsum.photos/100/70?random=1" alt="Related media" class="w-20 h-14 object-cover rounded-md shadow-sm border border-emerald-100 dark:border-teal-700"/>
              <div class="flex-1">
                <a href="#" class="block text-md font-semibold text-emerald-600 dark:text-teal-400 hover:text-emerald-800 dark:hover:text-amber-300 transition-colors duration-200">
                  Whispers of the Ancient Woods
                </a>
                <p class="text-sm text-gray-500 dark:text-gray-400">A deep dive into old-growth forests.</p>
              </div>
            </li>
            <li class="flex items-center space-x-4 border-b pb-4 last:border-b-0 last:pb-0 border-emerald-200 dark:border-teal-800">
              <img src="https://picsum.photos/100/70?random=2" alt="Related media" class="w-20 h-14 object-cover rounded-md shadow-sm border border-emerald-100 dark:border-teal-700"/>
              <div class="flex-1">
                <a href="#" class="block text-md font-semibold text-emerald-600 dark:text-teal-400 hover:text-emerald-800 dark:hover:text-amber-300 transition-colors duration-200">
                  Rivers of Sapphire: Journey Through Waterways
                </a>
                <p class="text-sm text-gray-500 dark:text-gray-400">Exploring the lifeblood of ecosystems.</p>
              </div>
            </li>
            <li class="flex items-center space-x-4 border-b pb-4 last:border-b-0 last:pb-0 border-emerald-200 dark:border-teal-800">
              <img src="https://picsum.photos/100/70?random=3" alt="Related media" class="w-20 h-14 object-cover rounded-md shadow-sm border border-emerald-100 dark:border-teal-700"/>
              <div class="flex-1">
                <a href="#" class="block text-md font-semibold text-emerald-600 dark:text-teal-400 hover:text-emerald-800 dark:hover:text-amber-300 transition-colors duration-200">
                  Ruby Sunset: The Colors of Wildlife
                </a>
                <p class="text-sm text-gray-500 dark:text-gray-400">A photographic essay on vibrant animal life.</p>
              </div>
            </li>
          </ul>
        </section>

        <!-- Newsletter Signup -->
        <section class="bg-emerald-100 dark:bg-emerald-950 p-6 rounded-2xl shadow-lg border border-emerald-300 dark:border-teal-600 transform hover:scale-[1.01] transition-transform duration-300 ease-out">
          <h2 class="text-xl font-bold mb-4 text-emerald-800 dark:text-emerald-300">Embrace the Flow with Our Newsletter</h2>
          <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">
            Join our community for weekly insights into nature, sustainability, and mindful living.
          </p>
          <form class="space-y-4">
            <input type="email" placeholder="[email protected]" class="w-full p-3 rounded-lg border border-emerald-400 dark:border-teal-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-emerald-500 dark:focus:ring-teal-400 focus:border-transparent transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500" aria-label="Email address for newsletter signup" required />
            <button type="submit" class="w-full bg-emerald-600 hover:bg-emerald-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white font-bold py-3 px-6 rounded-xl shadow-md transition-colors duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-teal-400 dark:focus:ring-offset-gray-900">
              Subscribe Now
            </button>
          </form>
        </section>
      </aside>
    </div>
  </div>
</div>

Brutalist_Retro_Media_Embed_E-commerce

Un composant d’intégration multimédia complexe, réactif et de style brutaliste pour le commerce électronique, avec un contraste élevé, une palette de couleurs rétro, la prise en charge du mode sombre et de multiples éléments interactifs pour la présentation des produits.

Ouvrir Aperçu

                <div class="font-sans bg-[#F0E6D2] text-[#333333] dark:bg-[#1E272C] dark:text-[#E0E0E0] p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">
  <div class="max-w-7xl mx-auto border-4 border-[#8B0000] dark:border-[#FFD700] bg-[#EAE0C8] dark:bg-[#2C3E50] shadow-[10px_10px_0px_0px_#8B0000] dark:shadow-[10px_10px_0px_0px_#FFD700] relative overflow-hidden">
    <div class="absolute top-0 left-0 w-full h-full border-t-4 border-l-4 border-b-4 border-r-4 border-[#8B0000] dark:border-[#FFD700] pointer-events-none z-10"></div>
    
    <!-- Header Bar -->
    <div class="bg-[#8B0000] dark:bg-[#FFD700] text-[#F0E6D2] dark:text-[#1E272C] p-3 border-b-4 border-[#333333] dark:border-[#FFD700] relative z-20">
      <div class="flex items-center justify-between">
        <h2 class="text-xl sm:text-2xl font-bold uppercase tracking-wider">// PRODUCT SHOWCASE : ITEM #1337</h2>
        <div class="flex space-x-2">
          <button class="px-3 py-1 bg-[#333333] text-[#F0E6D2] text-sm font-bold uppercase border-2 border-[#F0E6D2] hover:bg-[#555555] dark:bg-[#1E272C] dark:text-[#FFD700] dark:border-[#FFD700] dark:hover:bg-[#334455]">X</button>
          <button class="px-3 py-1 bg-[#333333] text-[#F0E6D2] text-sm font-bold uppercase border-2 border-[#F0E6D2] hover:bg-[#555555] dark:bg-[#1E272C] dark:text-[#FFD700] dark:border-[#FFD700] dark:hover:bg-[#334455]">_</button>
          <button class="px-3 py-1 bg-[#333333] text-[#F0E6D2] text-sm font-bold uppercase border-2 border-[#F0E6D2] hover:bg-[#555555] dark:bg-[#1E272C] dark:text-[#FFD700] dark:border-[#FFD700] dark:hover:bg-[#334455]">[]</button>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-0 relative z-0">
      <!-- Main Media Area (left/top) -->
      <div class="md:col-span-2 lg:col-span-3 border-r-4 border-b-4 md:border-b-0 border-[#8B0000] dark:border-[#FFD700] p-4 md:p-6 lg:p-8 flex items-center justify-center bg-[#D2B48C] dark:bg-[#34495E]">
        <div class="w-full aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-4 border-[#333333] dark:border-[#FFD700] shadow-[5px_5px_0px_0px_#333333] dark:shadow-[5px_5px_0px_0px_#FFD700]">
          <!-- Placeholder for Video/Main Image -->
          <img src="https://picsum.photos/1000/562?random=1" alt="Main Product Media" class="w-full h-full object-cover grayscale opacity-90 hover:grayscale-0 hover:opacity-100 transition-all duration-300">
        </div>
      </div>

      <!-- Product Info / Controls (right/bottom) -->
      <div class="md:col-span-1 lg:col-span-1 p-4 md:p-6 lg:p-8 bg-[#ECC9A3] dark:bg-[#4A636F] flex flex-col justify-between border-b-4 md:border-b-0 md:border-l-4 md:border-t-0 border-[#8B0000] dark:border-[#FFD700]">
        <div>
          <h3 class="text-2xl sm:text-3xl font-bold uppercase mb-2 text-[#8B0000] dark:text-[#FFD700]">Vintage Gizmo XL</h3>
          <p class="text-base sm:text-lg mb-4 leading-tight text-[#333333] dark:text-[#E0E0E0]">A retro-futuristic device for analog data manipulation. Extremely rare. Acts like a charm, looks like a beast.</p>
          
          <div class="flex items-baseline mb-4">
            <p class="text-4xl font-extrabold text-[#A0522D] dark:text-[#FF9900] mr-2">$499.<span class="text-3xl">99</span></p>
            <p class="text-2xl line-through text-[#666666] dark:text-[#999999]">$699.<span class="text-xl">99</span></p>
          </div>

          <div class="mb-4 border-b-2 border-[#8B0000] dark:border-[#FFD700] pb-4">
            <h4 class="text-lg font-bold uppercase mb-2 text-[#8B0000] dark:text-[#FFD700]">// STATUS</h4>
            <div class="flex justify-around text-center">
              <div class="flex-1">
                <p class="text-xl font-bold text-[#333333] dark:text-[#E0E0E0]">IN STOCK</p>
                <p class="text-sm text-[#666666] dark:text-[#999999]">Qty: <span class="font-bold">1</span></p>
              </div>
              <div class="flex-1">
                <p class="text-xl font-bold text-[#E0B200] dark:text-[#99E000]">LIMITED</p>
                <p class="text-sm text-[#666666] dark:text-[#999999]">Edition</p>
              </div>
            </div>
          </div>

        </div>

        <div class="space-y-4">
          <button class="w-full py-4 bg-[#8B0000] dark:bg-[#FFD700] text-[#F0E6D2] dark:text-[#1E272C] text-xl font-extrabold uppercase border-4 border-[#333333] dark:border-[#1E272C] shadow-[5px_5px_0px_0px_#333333] dark:shadow-[5px_5px_0px_0px_#1E272C] hover:shadow-[2px_2px_0px_0px_#333333] dark:hover:shadow-[2px_2px_0px_0px_#1E272C] hover:translate-x-2 hover:translate-y-2 transition-all duration-150">
            ADD TO CART
          </button>
          <button class="w-full py-3 bg-[#A0522D] dark:bg-[#2C3E50] text-[#F0E6D2] dark:text-[#FFD700] text-lg font-bold uppercase border-2 border-[#333333] dark:border-[#FFD700] hover:bg-[#B0633C] dark:hover:bg-[#3A5060]">
            MORE DETAILS
          </button>
        </div>
      </div>

      <!-- Thumbnail Gallery -->
      <div class="col-span-1 md:col-span-3 lg:col-span-4 p-4 md:p-6 lg:p-8 border-t-4 border-[#8B0000] dark:border-[#FFD700] bg-[#D2B48C] dark:bg-[#34495E]">
        <h4 class="text-lg font-bold uppercase mb-4 text-[#8B0000] dark:text-[#FFD700]">// RELATED VISUALS</h4>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
            <img src="https://picsum.photos/300/200?random=2" alt="Thumbnail 1" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
            <img src="https://picsum.photos/300/200?random=3" alt="Thumbnail 2" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
            <img src="https://picsum.photos/300/200?random=4" alt="Thumbnail 3" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
            <img src="https://picsum.photos/300/200?random=5" alt="Thumbnail 4" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden sm:block">
            <img src="https://picsum.photos/300/200?random=6" alt="Thumbnail 5" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden lg:block">
            <img src="https://picsum.photos/300/200?random=7" alt="Thumbnail 6" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden xl:block">
            <img src="https://picsum.photos/300/200?random=8" alt="Thumbnail 7" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
          <div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden xl:block">
            <img src="https://picsum.photos/300/200?random=9" alt="Thumbnail 8" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
          </div>
        </div>
      </div>

      <!-- Customer Reviews / Related Products (Bottom Strip) -->
      <div class="col-span-1 md:col-span-3 lg:col-span-4 p-4 md:p-6 lg:p-8 border-t-4 border-[#8B0000] dark:border-[#FFD700] bg-[#ECC9A3] dark:bg-[#4A636F]">
        <h4 class="text-lg font-bold uppercase mb-4 text-[#8B0000] dark:text-[#FFD700]">// CUSTOMER OVERVIEW</h4>
        <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-8">
          <div class="flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Customer Avatar" class="w-24 h-24 rounded-full border-4 border-[#333333] dark:border-[#FFD700] shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
          </div>
          <div class="flex-grow text-center sm:text-left">
            <p class="text-xl font-bold text-[#A0522D] dark:text-[#FF9900] mb-2">"Absolutely RAW Power!"</p>
            <p class="text-base text-[#333333] dark:text-[#E0E0E0] mb-2">This Gizmo XL exceeded all my expectations. The brutalist design is a refreshing change, and its functionality is unmatched. Highly recommend for any serious collector.</p>
            <p class="text-sm text-[#666666] dark:text-[#999999]">- <span class="font-bold">J. DOE</span>, Verified Purchaser</p>
          </div>
        </div>
        <div class="mt-6 text-center">
          <button class="px-6 py-2 bg-[#333333] text-[#F0E6D2] dark:bg-[#1E272C] dark:text-[#FFD700] text-sm font-bold uppercase border-2 border-[#F0E6D2] dark:border-[#FFD700] hover:bg-[#555555] dark:hover:bg-[#334455] shadow-[3px_3px_0px_0px_#8B0000] dark:shadow-[3px_3px_0px_0px_#FFD700]">
            READ ALL REVIEWS
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Composant d’intégration de média neumorphique

Un composant multimédia complexe et neumorphe aux couleurs vives, conçu pour les outils CRM/Business, présentant un lecteur vidéo, du contenu associé et des commandes interactives avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen bg-gradient-to-br from-blue-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 font-sans text-gray-800 dark:text-gray-200">
  <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-8 text-center text-indigo-700 dark:text-purple-400 drop-shadow-lg">CRM Media Insight</h2>

  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Main Media Player Section -->
    <div class="lg:col-span-2 p-6 rounded-3xl bg-blue-100 dark:bg-gray-850 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300">
      <div class="relative pb-[56.25%] h-0 mb-6 rounded-2xl overflow-hidden shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark">
        <iframe class="absolute top-0 left-0 w-full h-full rounded-2xl" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>

      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4">
        <div>
          <h3 class="text-xl sm:text-2xl font-bold text-indigo-800 dark:text-purple-300 mb-1">Customer Onboarding: Module 1</h3>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Presented by Acme Solutions, Inc.</p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
          <button class="p-3 rounded-full bg-blue-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark text-indigo-700 dark:text-purple-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-850" aria-label="Like Video">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 21.35l-1.95-1.8C4.24 14.07 2 12.16 2 9.5 2 7.02 3.99 5 6.5 5c1.74 0 3.41.81 4.5 2.09C12.09 5.81 13.76 5 15.5 5 18.01 5 20 7.02 20 9.5c0 2.66-2.24 4.57-8 10.09z"/>
            </svg>
          </button>
          <button class="p-3 rounded-full bg-blue-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark text-indigo-700 dark:text-purple-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-850" aria-label="Share Video">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.55 1.25.89 2.04.89 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.03.47.08.69L6 8.35v7.3l-2.07-1.12c-.01-.01-.02-.01-.03-.02-.12-.08-.2-.17-.28-.31-.1-.18-.18-.39-.23-.62-.05-.23-.08-.48-.08-.73 0-.25.03-.5.08-.73.05-.23.13-.44.23-.62.08-.14.16-.23.28-.31.01-.01.02-.01.03-.02l2.36-1.3c-.05-.22-.08-.46-.08-.7 0-1.66 1.34-3 3-3s3 1.34 3 3c0 .24-.03.47-.08.69L18 8.35c.76 0 1.44.3 1.96.77L21 12.3c-.05.23-.09.46-.09.7s.04.47.09.7L18.04 16.08l-.01.01z"/>
            </svg>
          </button>
        </div>
      </div>

      <div class="text-gray-700 dark:text-gray-300 mb-6">
        <p class="mb-2 text-justify">This comprehensive video provides an in-depth guide to the initial steps of customer onboarding within the CRM system. Learn how to efficiently set up new client profiles, assign tasks, and track their progress through the initial stages of their journey.</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">#CRM #Onboarding #CustomerSuccess #BusinessTools</p>
      </div>

      <!-- Comment / Interaction Section -->
      <div class="pt-4 border-t border-blue-200 dark:border-gray-700">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-10 h-10 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <input type="text" placeholder="Add a comment..." class="flex-grow p-3 rounded-full bg-blue-50 dark:bg-gray-750 placeholder-gray-500 text-gray-800 dark:text-gray-200 shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-purple-500 transition-all duration-200">
          <button class="p-3 rounded-full bg-green-400 dark:bg-green-600 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark text-white transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-850" aria-label="Post Comment">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
            </svg>
          </button>
        </div>

        <div class="space-y-4">
          <div class="flex items-start space-x-3 p-3 rounded-xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm">
            <img class="w-8 h-8 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Commenter Avatar">
            <div>
              <p class="font-semibold text-indigo-700 dark:text-purple-300 text-sm">Sarah J.</p>
              <p class="text-gray-700 dark:text-gray-300 text-sm">"Great insights! This really simplifies the initial setup."</p>
              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">2 days ago</p>
            </div>
          </div>
          <div class="flex items-start space-x-3 p-3 rounded-xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm">
            <img class="w-8 h-8 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Commenter Avatar">
            <div>
              <p class="font-semibold text-indigo-700 dark:text-purple-300 text-sm">Mark P.</p>
              <p class="text-gray-700 dark:text-gray-300 text-sm">"How do I integrate this with our external reporting tools?"</p>
              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">1 day ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Sidebar / Related Content Section -->
    <div class="lg:col-span-1 p-6 rounded-3xl bg-blue-100 dark:bg-gray-850 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300">
      <h4 class="text-lg sm:text-xl font-bold text-indigo-800 dark:text-purple-300 mb-4">Related Content</h4>

      <div class="space-y-6">
        <!-- Related Item 1 -->
        <div class="group flex flex-col sm:flex-row items-start sm:items-center space-y-3 sm:space-y-0 sm:space-x-4 p-4 rounded-2xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark cursor-pointer transition-all duration-200">
          <img class="flex-shrink-0 w-28 h-16 sm:w-24 sm:h-16 rounded-lg object-cover shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark transform group-hover:scale-105 transition-transform duration-200" src="https://picsum.photos/id/1018/300/200" alt="Thumbnail">
          <div>
            <p class="font-semibold text-indigo-700 dark:text-purple-300 text-base mb-1 group-hover:text-pink-600 dark:group-hover:text-amber-400">Advanced CRM Analytics</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Unlock deeper customer insights with advanced reporting features.</p>
          </div>
        </div>
        <!-- Related Item 2 -->
        <div class="group flex flex-col sm:flex-row items-start sm:items-center space-y-3 sm:space-y-0 sm:space-x-4 p-4 rounded-2xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark cursor-pointer transition-all duration-200">
          <img class="flex-shrink-0 w-28 h-16 sm:w-24 sm:h-16 rounded-lg object-cover shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark transform group-hover:scale-105 transition-transform duration-200" src="https://picsum.photos/id/1025/300/200" alt="Thumbnail">
          <div>
            <p class="font-semibold text-indigo-700 dark:text-purple-300 text-base mb-1 group-hover:text-pink-600 dark:group-hover:text-amber-400">Integrate with Marketing Automation</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Seamlessly connect your CRM with popular marketing platforms.</p>
          </div>
        </div>
        <!-- Related Item 3 -->
        <div class="group flex flex-col sm:flex-row items-start sm:items-center space-y-3 sm:space-y-0 sm:space-x-4 p-4 rounded-2xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark cursor-pointer transition-all duration-200">
          <img class="flex-shrink-0 w-28 h-16 sm:w-24 sm:h-16 rounded-lg object-cover shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark transform group-hover:scale-105 transition-transform duration-200" src="https://picsum.photos/id/1069/300/200" alt="Thumbnail">
          <div>
            <p class="font-semibold text-indigo-700 dark:text-purple-300 text-base mb-1 group-hover:text-pink-600 dark:group-hover:text-amber-400">Sales Workflow Optimization</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Streamline your sales process for maximum efficiency.</p>
          </div>
        </div>

        <button class="w-full mt-6 py-3 px-6 rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white font-semibold text-lg shadow-neumorphic-vibrant dark:shadow-neumorphic-vibrant-dark hover:from-violet-600 hover:to-fuchsia-600 transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-850">
          Explore More Topics
        </button>
      </div>
    </div>
  </div>

  <style>
  /* Neumorphic Shadows (light mode) */
  .shadow-neumorphic-light {
    box-shadow: 10px 10px 20px #a3b1c6, -10px -10px 20px #ffffff;
  }
  .shadow-neumorphic-light-sm {
    box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-pressed-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }
  .shadow-inset-neumorphic-light {
    box-shadow: inset 7px 7px 14px #a3b1c6, inset -7px -7px 14px #ffffff;
  }

  /* Neumorphic Shadows (dark mode) */
  .dark .shadow-neumorphic-dark {
    box-shadow: 10px 10px 20px #1a1a1a, -10px -10px 20px #3a3a3a;
  }
  .dark .shadow-neumorphic-dark-sm {
    box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #3a3a3a;
  }
  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 5px 5px 10px #0e0e0e, inset -5px -5px 10px #4d4d4d;
  }
  .dark .shadow-inset-neumorphic-dark {
    box-shadow: inset 7px 7px 14px #0e0e0e, inset -7px -7px 14px #4d4d4d;
  }

  /* Vibrant neumorphic button shadow */
  .shadow-neumorphic-vibrant {
    box-shadow: 10px 10px 20px rgba(139, 92, 246, 0.4), -10px -10px 20px rgba(232, 107, 203, 0.4);
  }
  .dark .shadow-neumorphic-vibrant-dark {
    box-shadow: 10px 10px 20px rgba(139, 92, 246, 0.2), -10px -10px 20px rgba(232, 107, 203, 0.2);
  }

  /* Custom Background Colors for Neumorphism */
  .bg-blue-50 {
    background-color: #e0f2f7; /* Light cyan for softer neumorphism */
  }
  .dark .bg-gray-850 {
      background-color: #27272a; /* Slightly lighter than gray-900 */
  }
  .bg-blue-100 {
      background-color: #e9f5f9; /* Base for light elements */
  }
  .dark .bg-gray-850 {
      background-color: #27272a; /* Base for dark elements */
  }
  .bg-blue-150 {
      background-color: #f0f7fb; /* Slightly lighter for inner elements */
  }
  .dark .bg-gray-800 {
      background-color: #2c2c2f; /* Slightly lighter for inner elements in dark mode */
  }
  .dark .bg-gray-750 {
       background-color: #3b3b3e; /* Input background */
  }
  .bg-blue-200 {
      background-color: #cce9f5; /* For buttons and interactive elements */
  }

  /* Example of how to integrate this with Tailwind PostCSS setup:
  @layer base {
    :root {
      --color-blue-50: #e0f2f7;
      --color-blue-100: #e9f5f9;
      --color-blue-150: #f0f7fb;
      --color-blue-200: #cce9f5;
    }
    .dark {
      --color-gray-850: #27272a;
      --color-gray-750: #3b3b3e;
      --color-gray-800: #2c2c2f;
    }
  }
  @layer components {
    .shadow-neumorphic-light {
      box-shadow: 10px 10px 20px #a3b1c6, -10px -10px 20px #ffffff;
    }
    .shadow-neumorphic-dark {
      box-shadow: 10px 10px 20px #1a1a1a, -10px -10px 20px #3a3a3a;
    }
    /* ... rest of the neumorphic shadows */
  }
  */
  </style>
</div>

Composant d’intégration de support de voyage Art Déco

Un composant multimédia complexe et très contrasté de style Art déco pour les sites Web de voyage et de tourisme, avec des motifs géométriques, un style luxueux et une réactivité totale avec prise en charge du mode sombre. Conçu pour afficher des destinations ou des activités de voyage avec un lecteur multimédia intégré, des détails et un appel à l’action.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-stone-100 text-stone-900 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 rounded-xl shadow-2xl relative overflow-hidden">

  <!-- Art Deco Border Elements (Purely Decorative) -->
  <div class="absolute inset-0 border-4 border-stone-800 dark:border-stone-200 rounded-xl pointer-events-none z-0"></div>
  <div class="absolute top-0 left-0 w-16 h-16 bg-gradient-to-br from-amber-500 to-yellow-600 rounded-br-full transform origin-top-left -translate-x-1/2 -translate-y-1/2 opacity-70"></div>
  <div class="absolute bottom-0 right-0 w-16 h-16 bg-gradient-to-tl from-amber-500 to-yellow-600 rounded-tl-full transform origin-bottom-right translate-x-1/2 translate-y-1/2 opacity-70"></div>

  <div class="relative z-10 flex flex-col lg:flex-row gap-8 lg:gap-12 items-start">

    <!-- Left Section: Media Player and Geometric Background -->
    <div class="w-full lg:w-3/5 relative rounded-lg overflow-hidden shadow-xl aspect-video bg-stone-800 dark:bg-stone-700 border-4 border-stone-800 dark:border-stone-200">
      <!-- Placeholder for Video Embed -->
      <iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <div class="absolute inset-0 bg-gradient-to-br from-stone-900/50 to-stone-900/10 dark:from-stone-900/70 dark:to-stone-900/30"></div>

      <!-- Geometric Overlay Example -->
      <div class="absolute inset-0 pointer-events-none opacity-20 dark:opacity-30">
        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
          <polygon points="0,0 20,0 0,20" fill="#d4a26a"></polygon>
          <polygon points="100,0 80,0 100,20" fill="#d4a26a"></polygon>
          <polygon points="0,100 0,80 20,100" fill="#d4a26a"></polygon>
          <polygon points="100,100 100,80 80,100" fill="#d4a26a"></polygon>
          <rect x="25" y="25" width="50" height="50" rx="5" ry="5" fill="none" stroke="#d4a26a" stroke-width="1"></rect>
        </svg>
      </div>
    </div>

    <!-- Right Section: Content Details -->
    <div class="w-full lg:w-2/5 flex flex-col gap-6">
      <header>
        <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight leading-tight text-amber-600 dark:text-amber-400 drop-shadow-lg [text-shadow:2px_2px_4px_var(--tw-shadow-color)] shadow-stone-900 dark:shadow-stone-700">
          Explore the Golden Era of Travel
        </h2>
        <p class="mt-3 text-lg sm:text-xl text-stone-700 dark:text-stone-300 font-serif italic border-l-4 border-amber-500 pl-4">
          Discover the untouched marvels of a bygone world.
        </p>
      </header>

      <div class="space-y-4 text-stone-800 dark:text-stone-200">
        <p class="text-base leading-relaxed">
          Step back in time to an era of elegance and grand adventure. This exclusive journey takes you through breathtaking landscapes, unveiling hidden gems and iconic landmarks, all with a touch of vintage luxury.
        </p>
        <ul class="list-none p-0 m-0 space-y-2">
          <li class="flex items-center gap-3">
            <svg class="w-6 h-6 text-amber-500 flex-shrink-0" 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.5 13.5L5 9L1 13.5" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M23 12h-6.5M10.5 5.5L15 1L19.5 5.5" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M23 12h-6.5M10.5 5.5L15 1L19.5 5.5" /><rect x="1" y="1" width="22" height="22" rx="2" ry="2" stroke="currentColor" fill="none"/></svg>
            <span class="font-bold">Destination:</span> The Uncharted Highlands
          </li>
          <li class="flex items-center gap-3">
            <svg class="w-6 h-6 text-amber-500 flex-shrink-0" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            <span class="font-bold">Duration:</span> 7 Days / 6 Nights
          </li>
          <li class="flex items-center gap-3">
            <svg class="w-6 h-6 text-amber-500 flex-shrink-0" 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="M17.686 17.686A5 5 0 0015 13.5a5 5 0 00-7.071-7.071m2.122 2.121a2 2 0 112.828 2.828M15 11l-8 8m-4-2h1.01M20 16h1.01M13 1h-1.01M1 8h1.01M7 23h.01M17 23h.01M23 8h-.01M13 23h.01"></path></svg>
            <span class="font-bold">Travel Style:</span> Vintage Luxury, Expeditionary
          </li>
        </ul>
      </div>

      <div class="flex flex-col sm:flex-row gap-4 mt-6">
        <a href="#book-now" class="w-full sm:w-auto px-8 py-3 bg-amber-600 hover:bg-amber-700 text-stone-50 font-bold uppercase rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 active:scale-95
          border-2 border-amber-700 dark:border-amber-400
          relative overflow-hidden group">
          <span class="relative z-10">Book Your Grand Tour</span>
          <div class="absolute inset-0 bg-stone-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        </a>
        <a href="#learn-more" class="w-full sm:w-auto px-8 py-3 bg-transparent text-amber-600 dark:text-amber-400 font-bold uppercase rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 active:scale-95
          border-2 border-amber-600 dark:border-amber-400 hover:bg-amber-600 hover:text-stone-50 dark:hover:bg-amber-400 dark:hover:text-stone-900">
          <span class="relative z-10">Learn More</span>
        </a>
      </div>
    </div>

  </div>

</div>

Médias sportifs cyberpunk Intégrer

Un composant multimédia complexe et réactif conçu pour les applications de sport/fitness avec une esthétique cyberpunk. Comprend des arrière-plans sombres monochromes avec des accents de néon brillants, plusieurs éléments interactifs et une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <div class="font-sans bg-gray-950 text-emerald-300 min-h-screen p-4 sm:p-8 dark:bg-gray-900 overflow-hidden">
  <div class="max-w-7xl mx-auto bg-gray-900 rounded-none shadow-neon-emerald border-t-2 border-l-2 border-emerald-500 overflow-hidden dark:bg-gray-800 dark:border-emerald-700 relative">
    <!-- Glitch effect pseudo-element -->
    <div class="absolute inset-0 z-0 pointer-events-none after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-br after:from-emerald-900/50 after:to-transparent after:animate-flicker">
    </div>
    
    <!-- Header -->
    <div class="relative z-10 px-6 py-4 border-b border-emerald-700/50 flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-wider uppercase text-emerald-400 drop-shadow-md shadow-emerald-500/50">
        <span class="block transform -skew-x-12">Live Stream_</span>
        <span class="block text-xs sm:text-sm text-emerald-500 uppercase ml-2">// Cyber-Arena</span>
      </h2>
      <div class="flex space-x-2">
        <button class="px-3 py-1 bg-emerald-700 hover:bg-emerald-600 text-white text-xs font-semibold uppercase rounded-sm transition-colors duration-200 border border-emerald-500 shadow-sm shadow-emerald-500/30">RECORD</button>
        <button class="px-3 py-1 bg-gray-800 hover:bg-gray-700 text-emerald-300 text-xs font-semibold uppercase rounded-sm border border-emerald-700 shadow-sm shadow-emerald-700/30">VIEW ALL</button>
      </div>
    </div>

    <div class="relative z-10 grid grid-cols-1 lg:grid-cols-3 gap-0">
      <!-- Main Video Player Section -->
      <div class="lg:col-span-2 bg-black overflow-hidden relative group">
        <div class="aspect-video w-full bg-gray-900 flex items-center justify-center">
          <!-- Placeholder for video player -->
          <img src="https://picsum.photos/1280/720?random=1" alt="Live Sports Event" class="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-500 ease-in-out">
          <div class="absolute inset-0 flex items-center justify-center p-4">
            <div class="bg-emerald-800/60 backdrop-blur-sm p-4 rounded-lg border border-emerald-600 text-center text-white/90 shadow-lg shadow-emerald-500/40">
              <svg class="w-16 h-16 mx-auto mb-2 text-emerald-300 animate-pulse" 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>
              <p class="text-sm sm:text-lg font-bold uppercase tracking-wide">STREAM PENDING: ARENA INITIALIZING...</p>
              <p class="text-xs text-emerald-200 mt-1">Estimated Start: 13:00 GMT+1</p>
            </div>
          </div>
        </div>
        <!-- Player Controls (simple placeholders) -->
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-gray-900 to-transparent p-4 flex items-center justify-between text-emerald-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <div class="flex items-center space-x-2">
            <svg class="w-5 h-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>
            <span>00:15 / 23:45</span>
          </div>
          <div class="flex items-center space-x-2">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 5H6a2 2 0 00-2 2v2a2 2 0 002 2h1v4a2 2 0 002 2h2a2 2 0 002-2v-4h1a2 2 0 002-2V7a2 2 0 00-2-2h-3zm-1 9v-3h-3V7h7v4h-3v3z"></path></svg>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.552 6.858 2 12 2c5.142 0 10.268 3.552 11.542 8-.268.587-.542 1.25-.8 1.9-.3-.55-.6-1.127-.9-1.7zm13.197-2.316l-3.3 3.3a1 1 0 01-1.414 0l-3.3-3.3a1 1 0 011.414-1.414L10 8.586l2.096-2.096a1 1 0 011.414 1.414z" clip-rule="evenodd"></path></svg>
          </div>
        </div>
      </div>

      <!-- Information / Chat Sidebar -->
      <div class="lg:col-span-1 border-t-2 border-emerald-700/50 lg:border-t-0 lg:border-l-2 bg-gray-900 flex flex-col dark:bg-gray-800">
        <!-- Tabs for Info / Chat -->
        <div class="flex text-sm sm:text-base border-b-2 border-emerald-700/50">
          <button class="flex-1 py-3 px-2 text-center uppercase tracking-wide font-bold text-emerald-300 border-r border-emerald-700/50 hover:bg-emerald-900/40 dark:hover:bg-emerald-700/40 transition-colors duration-200 active-tab">
            OVERVIEW
          </button>
          <button class="flex-1 py-3 px-2 text-center uppercase tracking-wide font-bold text-emerald-500 hover:bg-emerald-900/40 dark:hover:bg-emerald-700/40 transition-colors duration-200">
            LIVE CHAT
          </button>
        </div>

        <!-- Content Area -->
        <div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 max-h-[400px] lg:max-h-[unset]">
          <!-- Overview Content -->
          <div class="space-y-4">
            <div>
              <h3 class="text-xl font-bold text-emerald-400 mb-2 uppercase border-b border-emerald-700/50 pb-1">Event Details_</h3>
              <p class="text-emerald-200 text-sm leading-relaxed tracking-tight">
                Witness the ultimate showdown: 'Gravity Gauntlet' Season Finals. Teams 'Neon Raptors' and 'Circuit Breakers' clash in a zero-G tactical combat for championship supremacy. 
                Expected duration: 2 hours. High-tension action guaranteed.
              </p>
            </div>

            <div>
              <h3 class="text-xl font-bold text-emerald-400 mb-2 uppercase border-b border-emerald-700/50 pb-1">Key Players_</h3>
              <div class="space-y-3">
                <div class="flex items-center space-x-3 bg-gray-800 p-2 rounded-sm border border-emerald-800/50 shadow-inner shadow-emerald-900/20">
                  <img class="w-10 h-10 rounded-full border-2 border-emerald-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player Avatar">
                  <div>
                    <p class="font-semibold text-emerald-300">SYNTAX_ERROR</p>
                    <p class="text-emerald-400 text-xs">Neon Raptors - Striker</p>
                  </div>
                </div>
                <div class="flex items-center space-x-3 bg-gray-800 p-2 rounded-sm border border-emerald-800/50 shadow-inner shadow-emerald-900/20">
                  <img class="w-10 h-10 rounded-full border-2 border-emerald-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Player Avatar">
                  <div>
                    <p class="font-semibold text-emerald-300">GHOST_PRØPHET</p>
                    <p class="text-emerald-400 text-xs">Circuit Breakers - Architect</p>
                  </div>
                </div>
              </div>
            </div>

            <div>
              <h3 class="text-xl font-bold text-emerald-400 mb-2 uppercase border-b border-emerald-700/50 pb-1">Stats & Analytics_</h3>
              <ul class="text-emerald-200 text-sm space-y-1">
                <li class="flex justify-between"><span>AVG. APM:</span> <span class="text-emerald-300">320</span></li>
                <li class="flex justify-between"><span>K/D Ratio:</span> <span class="text-emerald-300">1.87</span></li>
                <li class="flex justify-between"><span>ACCURACY:</span> <span class="text-emerald-300">89.2%</span></li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Ad/Sponsor Section -->
        <div class="p-4 sm:p-6 border-t-2 border-emerald-700/50 bg-gray-950 dark:bg-gray-850">
          <h3 class="text-lg font-bold text-emerald-500 mb-2 uppercase">Sponsored By_</h3>
          <div class="flex items-center justify-center bg-gray-800 h-20 rounded-sm border border-emerald-700/50 shadow-inner shadow-emerald-900/20">
            <span class="text-emerald-600 text-3xl font-mono opacity-80 animate-pulse">NEXUS_TECH</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer (simple for status) -->
    <div class="relative z-10 px-6 py-3 bg-gray-950 border-t-2 border-emerald-700/50 text-emerald-500 flex items-center justify-end text-xs sm:text-sm uppercase tracking-wide dark:bg-gray-850">
      <span class="block transform -skew-x-6 text-emerald-400">STATUS: </span>
      <span class="ml-1 text-emerald-300 animate-pulse">_ONLINE</span>
    </div>
  </div>
</div>

<style>
/* Define the flicker animation for the pseudo-element */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    filter: brightness(1) opacity(0);
  }
  20%, 24%, 55% {
    filter: brightness(1.5) opacity(0.2);
  }
}

.shadow-neon-emerald {
  box-shadow: 0 0 15px rgba(52, 211, 153, 0.6), /* emerald-300 */
              0 0 30px rgba(16, 185, 129, 0.4), /* emerald-500 */
              0 0 45px rgba(5, 150, 105, 0.2);  /* emerald-700 */
}

/* Custom scrollbar for Webkit browsers */
.overflow-y-auto::-webkit-scrollbar {
  width: 8px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #111827; /* gray-900 */
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #065F46; /* emerald-700 */
  border-radius: 4px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #047857; /* emerald-600 */
}

/* Specific glitch effect on header for more subtle animation */
.drop-shadow-md {
  text-shadow: 0 0 5px currentColor,
               0 0 10px currentColor,
               0 0 15px currentColor;
  animation: text-glitch 1s infinite alternate;
}

@keyframes text-glitch {
  0% { transform: translate(1px, 1px) skewX(0); }
  20% { transform: translate(-1px, 2px) skewX(-2deg); }
  40% { transform: translate(-2px, -1px) skewX(0); }
  60% { transform: translate(2px, 1px) skewX(2deg); }
  80% { transform: translate(-1px, -2px) skewX(0); }
  100% { transform: translate(1px, 1px) skewX(-1deg); }
}

@media (prefers-color-scheme: dark) {
  .dark\:bg-gray-900 {
    background-color: #111827 !important; /* Tailwind's gray-900 */
  }
  .dark\:border-emerald-700 {
    border-color: #047857 !important; /* Tailwind's emerald-700 */
  }
  .dark\:bg-gray-800 {
    background-color: #1F2937 !important; /* Tailwind's gray-800 */
  }
  .dark\:hover\:bg-emerald-700\/40:hover {
    background-color: rgba(4, 120, 87, 0.4) !important; /* emerald-700/40 */
  }
  .dark\:bg-gray-850 {
    background-color: #18202b !important; /* Slightly lighter than 900 for distinction */
  }
}
</style>

Composant d’intégration multimédia - Crypto/Blockchain

Un composant d’intégration multimédia simple et réactif conçu pour les applications de crypto-monnaie ou de blockchain, avec des tons sépia/bruns et la prise en charge du mode sombre pour réduire la fatigue oculaire.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-xl rounded-lg shadow-xl overflow-hidden bg-stone-200 dark:bg-stone-800 transition-colors duration-300 transform">
    <!-- Header -->
    <div class="flex items-center justify-between p-4 sm:p-5 border-b border-stone-300 dark:border-stone-700">
      <div class="flex items-center">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-stone-700 dark:text-stone-300" 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 20l-1 1h8l-1-1l-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
        </svg>
        <h3 class="ml-2 text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">Decentralized Insights</h3>
      </div>
      <button class="p-2 rounded-full hover:bg-stone-300 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-400 dark:focus:ring-offset-stone-800 dark:focus:ring-stone-600 transition-colors duration-200">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-stone-600 dark:text-stone-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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Media Placeholder -->
    <div class="relative w-full overflow-hidden" style="padding-top: 56.25%;">
      <!-- 16:9 Aspect Ratio -->
      <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <!-- Content -->
    <div class="p-4 sm:p-5">
      <h4 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-2 leading-tight">Understanding Bitcoin Halving: A Deep Dive</h4>
      <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300 mb-4">
        Explore the mechanisms and historical impact of Bitcoin halving events on its supply, scarcity, and market dynamics.
        Essential knowledge for every crypto enthusiast.
      </p>
      <div class="flex items-center text-sm sm:text-base text-stone-600 dark:text-stone-400">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-stone-400 dark:border-stone-600">
        <div>
          <span class="font-medium text-stone-700 dark:text-stone-300">Crypto Insights Hub</span>
          <span class="block text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Published 2 days ago</span>
        </div>
      </div>
    </div>

    <!-- Footer/Actions -->
    <div class="p-4 sm:p-5 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between">
      <button class="flex items-center text-stone-700 dark:text-stone-300 hover:text-brown-700 dark:hover:text-brown-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-400 dark:focus:ring-offset-stone-800 dark:focus:ring-brown-600 transition-colors duration-200">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
        </svg>
        <span class="text-sm sm:text-base">Like</span>
      </button>
      <button class="px-4 py-2 bg-amber-700 dark:bg-amber-600 text-white rounded-md text-sm sm:text-base font-semibold shadow-md hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-amber-400 transition-colors duration-200">
        Share to DApp
      </button>
    </div>
  </div>
</div>

Composant d’intégration de média

Un composant d’intégration multimédia simple et réactif à l’esthétique cyberpunk et bleu d’entreprise, conçu pour les interfaces de médias sociaux avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 md:p-6 lg:p-8 bg-gray-950 dark:bg-gray-950 text-blue-300 font-mono antialiased">
  <div class="max-w-xl mx-auto rounded-xl overflow-hidden shadow-2xl transition-all duration-300 ease-in-out
              bg-gradient-to-br from-gray-900 to-gray-800 dark:from-gray-900 dark:to-gray-800
              border border-blue-800 dark:border-blue-800 transform hover:scale-[1.01] hover:shadow-blue-500/30">
    
    <!-- Header / User Info -->
    <div class="flex items-center p-4 lg:p-5 border-b border-blue-900 dark:border-blue-900">
      <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-400 object-cover mr-3" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-blue-200 text-sm md:text-base font-semibold">@NeonNomad_2077</p>
        <p class="text-blue-500 text-xs mt-0.5">Sent from Cyber-Grid v3.1</p>
      </div>
    </div>

    <!-- Embedded Media Content -->
    <div class="relative pb-[56.25%] overflow-hidden bg-gray-800 dark:bg-gray-800">
      <!-- Placeholder for an iframe or video element -->
      <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <!-- Caption / Description -->
    <div class="p-4 lg:p-5 border-t border-blue-900 dark:border-blue-900">
      <p class="text-blue-300 text-sm leading-relaxed mb-2">
        Just uploaded the latest #CyberpunkBeat from the data-streams. Feel the pulse of the city! 🤘 Dive into the rhythm. 
        <span class="text-blue-500 hover:text-blue-400 cursor-pointer transition-colors duration-200">#FutureSounds #Synthwave #NeoTokyo</span>
      </p>
      <div class="flex justify-between items-center text-blue-400 text-xs">
        <span>2.3K Likes</span>
        <span>45 Comments</span>
        <span>Link Shared</span>
      </div>
    </div>

    <!-- Action Buttons (Optional) -->
    <div class="flex justify-around py-3 px-4 bg-gray-850 dark:bg-gray-850 border-t border-blue-900 dark:border-blue-900">
      <button class="flex items-center px-3 py-1 rounded-full text-blue-300 transition-all duration-300 ease-in-out
                     hover:bg-blue-900 hover:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        <svg class="w-5 h-5 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
        Like
      </button>
      <button class="flex items-center px-3 py-1 rounded-full text-blue-300 transition-all duration-300 ease-in-out
                     hover:bg-blue-900 hover:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        <svg class="w-5 h-5 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        Comment
      </button>
      <button class="flex items-center px-3 py-1 rounded-full text-blue-300 transition-all duration-300 ease-in-out
                     hover:bg-blue-900 hover:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        <svg class="w-5 h-5 mr-1" 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="M8.684 13.342C8.882 13.07 9 12.73 9 12c0-.73-.118-1.07-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l.676-.676M4.342 13.342C4.148 13.064 4 12.721 4 12c0-.721.148-1.064.342-1.342m0 2.684L5.018 12.018m0 0L4.342 11.342V12c0-.721.148-1.064.342-1.342m0 2.684a3 3 0 110-2.684"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.643v4.614z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11l-3 3-3-3"></path></svg>
        Share
      </button>
    </div>

  </div>
</div>

Composant d’intégration multimédia - Marketplace

Un composant d’intégration multimédia complexe et réactif conçu pour une place de marché, doté d’une esthétique Material Design avec une palette de couleurs rétro/vintage et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 transition-colors duration-300 p-4 sm:p-6 md:p-8 lg:p-10">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transition-all duration-300">
    <div class="md:flex">
      <!-- Media Section -->
      <div class="md:flex-shrink-0 relative w-full md:w-2/3 lg:w-3/5 xl:w-2/3">
        <div class="aspect-w-16 aspect-h-9 relative overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/1200/675?random=1" alt="Product media">
          <div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/70 to-transparent text-white flex justify-between items-end">
            <div class="flex items-center space-x-2">
              <button class="p-2 bg-black/50 rounded-full hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-yellow-400/80 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
              <span class="text-sm font-medium">0:35 / 4:12</span>
            </div>
            <div class="flex items-center space-x-2">
              <button class="p-2 bg-black/50 rounded-full hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-yellow-400/80 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M11 18h2v-6h-2v6zm4 0h2v-6h-2v6zM12 4.4L2 9.4v12.2h20V9.4L12 4.4zM4 20v-8h16v8H4z"></path></svg>
              </button>
              <button class="p-2 bg-black/50 rounded-full hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-yellow-400/80 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M15 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6.6-.9c.4-.7.1-1.6-.6-2-.7-.4-1.6-.1-2 .6-.4.7-.1 1.6.6 2 .7.4 1.6.1 2-.6zM9.4 14.9c-.4.7-.1 1.6.6 2 .7.4 1.6.1 2-.6.4-.7.1-1.6-.6-2-.7-.4-1.6-.1-2 .6zm3.2-5.4c.4.7.1 1.6-.6 2-.7.4-1.6.1-2-.6-.4-.7-.1-1.6.6-2 .7-.4 1.6-.1 2 .6z"></path></svg>
              </button>
            </div>
          </div>
        </div>
        <div class="grid grid-cols-4 gap-2 p-2 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <img class="w-full h-20 object-cover rounded shadow-sm cursor-pointer border-2 border-yellow-500" src="https://picsum.photos/300/200?random=1" alt="Thumbnail 1">
          <img class="w-full h-20 object-cover rounded shadow-sm cursor-pointer opacity-70 hover:opacity-100" src="https://picsum.photos/300/200?random=2" alt="Thumbnail 2">
          <img class="w-full h-20 object-cover rounded shadow-sm cursor-pointer opacity-70 hover:opacity-100" src="https://picsum.photos/300/200?random=3" alt="Thumbnail 3">
          <div class="relative w-full h-20 bg-gray-300 dark:bg-gray-600 rounded flex items-center justify-center cursor-pointer group">
            <img class="w-full h-full object-cover rounded opacity-70 group-hover:opacity-100" src="https://picsum.photos/300/200?random=4" alt="Thumbnail 4">
            <div class="absolute inset-0 bg-black/50 text-white flex items-center justify-center rounded">
              <span class="text-lg font-bold">+5</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Details Section -->
      <div class="p-6 md:p-8 md:w-1/3 lg:w-2/5 xl:w-1/3 flex flex-col justify-between">
        <div>
          <div class="uppercase tracking-wide text-sm text-amber-600 dark:text-amber-400 font-semibold mb-2">Vintage Collectible</div>
          <h1 class="block mt-1 text-2xl leading-tight font-extrabold text-gray-900 dark:text-white break-words md:text-3xl lg:text-4xl">
            Mid-Century Modern Desk Lamp
          </h1>
          <p class="mt-3 text-gray-600 dark:text-gray-300 text-sm md:text-base leading-relaxed">
            A rare and exquisite piece from the 1960s, a true testament to timeless design and craftsmanship, perfect for adding a touch of retro elegance to any space.
          </p>

          <div class="mt-4 flex items-baseline">
            <p class="text-4xl font-extrabold text-gray-900 dark:text-yellow-400 mr-2">$129.99</p>
            <p class="text-xl text-gray-500 dark:text-gray-400 line-through">$150.00</p>
            <span class="ml-2 text-green-600 dark:text-green-400 font-semibold text-sm">(13% off)</span>
          </div>

          <div class="mt-6">
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">Seller:</h3>
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover border-2 border-amber-400 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Seller Avatar">
              <div class="ml-4">
                <p class="text-lg font-medium text-gray-900 dark:text-white">RetroFinds Emporium</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">500+ sales <span class="text-amber-500">★ 4.9</span></p>
              </div>
            </div>
          </div>

          <div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">Features:</h3>
            <ul class="list-disc list-inside text-gray-600 dark:text-gray-300 text-sm space-y-1">
              <li>Solid Brass Construction</li>
              <li>Adjustable Articulating Arm</li>
              <li>Original Bakelite Switch</li>
              <li>Works with E27 LED bulbs</li>
            </ul>
          </div>
        </div>

        <div class="mt-8 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
          <button class="flex-1 bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-400/50">
            <svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M17 18a2 2 0 01-2 2A2 2 0 0113 18A2 2 0 0115 16A2 2 0 0117 18zm-7 0a2 2 0 01-2 2A2 2 0 016 18A2 2 0 018 16A2 2 0 0110 18zm10.7-15.6l-1.6 1.8c-1.1.9-2.6 1.2-4 1.1h-4.3c-.6 0-1.1.2-1.4.6l-2-2.1c-.8-.9-2.2-.9-3 0-1.2 1.3-1.4 3-1.4 4.5l.5 6.3c.1.7.7 1.2 1.4 1.2h14c.7 0 1.3-.5 1.4-1.2l.5-6.3c.1-1.5-.1-3.2-1.4-4.5z"></path></svg>
            Add to Cart
          </button>
          <button class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300/50 dark:focus:ring-gray-600/50">
            <svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
            Wishlist
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Composant d’intégration de média

Un composant d’intégration multimédia simple et réactif avec un design glassmorphism, une palette de couleurs pastel et une prise en charge du mode sombre, adapté à la consommation de blogs et de contenu.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-purple-900 dark:to-indigo-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-2xl bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-xl shadow-lg border border-white/40 dark:border-gray-700/60 overflow-hidden relative">
    <div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-purple-200/50 to-blue-200/50 dark:from-gray-700/50 dark:via-purple-700/50 dark:to-indigo-700/50 opacity-20 pointer-events-none rounded-xl"></div>
    <div class="p-4 sm:p-6 lg:p-8 space-y-4 relative z-10">
      <!-- Media Embed Area -->
      <div class="relative w-full aspect-video rounded-lg overflow-hidden shadow-md border border-white/50 dark:border-gray-700/70">
        <!-- Placeholder for actual embed, like an iframe for YouTube or Vimeo -->
        <img src="https://picsum.photos/600/338?random=1" alt="Placeholder Media" class="w-full h-full object-cover">
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 text-white text-lg font-semibold">
          Video Placeholder
        </div>
      </div>

      <!-- Content Details -->
      <div class="space-y-3">
        <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100">
          Exploring the Serene Landscapes
        </h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
          Dive into the breathtaking beauty of nature with this captivating journey through its peaceful and awe-inspiring vistas. Discover tranquility in every frame.
        </p>
        <div class="flex items-center space-x-3 text-gray-600 dark:text-gray-400 text-xs sm:text-sm pt-2">
          <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full object-cover border border-white/50 dark:border-gray-700/70 shadow-sm">
          <span>By Jessica Lee</span>
          <span class="text-gray-500 dark:text-gray-600">•</span>
          <span>March 15, 2024</span>
        </div>
      </div>
    </div>
  </div>
</div>