Rechercher des composants

Catégories

Composants Composants multimédias

Composants multimédias

Composants pour l’affichage de différents types de contenu multimédia

Memphis_Media_Component_Educational

Un composant multimédia réactif pour les plateformes éducatives, conçu avec une esthétique de style Memphis utilisant des couleurs vives, des formes géométriques et une palette de couleurs néon/électrique. Prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-400 to-pink-500 dark:from-gray-900 dark:to-purple-900 min-h-screen font-sans">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Course Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-fuchsia-500 dark:border-cyan-400">
      <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-400 to-electric-blue-600 dark:from-cyan-500 dark:to-lime-400 opacity-20 dark:opacity-10 transform -rotate-6 scale-125"></div>
      <div class="relative p-6">
        <img src="https://picsum.photos/id/10/400/250" alt="Course Thumbnail" class="w-full h-48 object-cover rounded-lg mb-4 border-2 border-dashed border-lime-400 dark:border-fuchsia-400">
        <h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight">Introduction to Quantum Computing</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Dive into the fascinating world of quantum mechanics and its computational applications.</p>
        <div class="flex items-center justify-between mb-4">
          <div class="flex -space-x-2 overflow-hidden">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-fuchsia-500 dark:ring-cyan-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor 1">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-fuchsia-500 dark:ring-cyan-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Instructor 2">
          </div>
          <span class="text-lg font-bold text-hot-pink-600 dark:text-electric-blue-400">$199.99</span>
        </div>
        <button class="w-full py-3 px-6 rounded-lg bg-lime-400 text-blue-900 dark:bg-fuchsia-500 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
          Enroll Now
        </button>
      </div>
    </div>

    <!-- Course Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-lime-400 dark:border-fuchsia-500">
      <div class="absolute inset-0 bg-gradient-to-br from-lime-400 to-hot-pink-500 dark:from-fuchsia-500 dark:to-cyan-400 opacity-20 dark:opacity-10 transform rotate-12 scale-125"></div>
      <div class="relative p-6">
        <img src="https://picsum.photos/id/25/400/250" alt="Course Thumbnail" class="w-full h-48 object-cover rounded-lg mb-4 border-2 border-dashed border-fuchsia-400 dark:border-lime-400">
        <h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight">Memphis Design Fundamentals</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Master the bold aesthetics of 80s Memphis design with practical projects.</p>
        <div class="flex items-center justify-between mb-4">
          <div class="flex -space-x-2 overflow-hidden">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500 dark:ring-purple-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Instructor 1">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Instructor 2">
          </div>
          <span class="text-lg font-bold text-electric-blue-600 dark:text-hot-pink-400">$149.99</span>
        </div>
        <button class="w-full py-3 px-6 rounded-lg bg-fuchsia-500 text-white dark:bg-lime-400 dark:text-blue-900 font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
          Learn More
        </button>
      </div>
    </div>

    <!-- Course Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-cyan-400 dark:border-hot-pink-500">
      <div class="absolute inset-0 bg-gradient-to-br from-cyan-400 to-purple-500 dark:from-hot-pink-500 dark:to-electric-blue-400 opacity-20 dark:opacity-10 transform -rotate-12 scale-125"></div>
      <div class="relative p-6">
        <img src="https://picsum.photos/id/40/400/250" alt="Course Thumbnail" class="w-full h-48 object-cover rounded-lg mb-4 border-2 border-dashed border-hot-pink-400 dark:border-cyan-400">
        <h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight">Advanced AI & Machine Learning</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Explore cutting-edge AI algorithms and build intelligent systems.</p>
        <div class="flex items-center justify-between mb-4">
          <div class="flex -space-x-2 overflow-hidden">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-cyan-500 dark:ring-fuchsia-400" src="https://randomuser.me/api/portraits/women/78.jpg" alt="Instructor 1">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-cyan-500 dark:ring-fuchsia-400" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Instructor 2">
          </div>
          <span class="text-lg font-bold text-lime-600 dark:text-fuchsia-400">$249.99</span>
        </div>
        <button class="w-full py-3 px-6 rounded-lg bg-electric-blue-500 text-white dark:bg-hot-pink-400 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
          View Details
        </button>
      </div>
    </div>

    <!-- Video Lesson Card -->
    <div class="relative md:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-hot-pink-500 dark:border-lime-400">
      <div class="absolute inset-0 bg-gradient-to-br from-hot-pink-400 to-lime-500 dark:from-electric-blue-500 dark:to-fuchsia-400 opacity-20 dark:opacity-10 transform scale-110"></div>
      <div class="relative p-6 flex flex-col md:flex-row items-center">
        <div class="md:w-1/2 mb-6 md:mb-0 md:mr-6">
          <img src="https://picsum.photos/id/90/600/350" alt="Video Thumbnail" class="w-full rounded-lg shadow-xl border-2 border-dashed border-electric-blue-400 dark:border-hot-pink-400">
        </div>
        <div class="md:w-1/2">
          <span class="text-xs font-bold uppercase tracking-wide text-hot-pink-600 dark:text-lime-400 mb-2 block">Featured Lesson</span>
          <h3 class="text-3xl font-extrabold text-blue-800 dark:text-lime-400 mb-3 leading-tight">Understanding Asynchronous JavaScript</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base mb-6">A comprehensive guide to promises, async/await, and event loops in modern JavaScript development.</p>
          <div class="flex items-center mb-6">
            <img class="h-10 w-10 rounded-full ring-2 ring-hot-pink-500 dark:ring-lime-400 mr-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Instructor">
            <div>
              <p class="text-sm font-bold text-gray-800 dark:text-gray-200">Dr. Elara Vance</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Senior Developer & Educator</p>
            </div>
          </div>
          <button class="w-full md:w-auto py-3 px-8 rounded-lg bg-electric-blue-500 text-white dark:bg-fuchsia-500 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
            Watch Now
            <span class="ml-2 text-2xl">&#9654;</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Downloadable Resource Card -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-fuchsia-500 dark:border-cyan-400">
      <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-400 to-electric-blue-600 dark:from-cyan-500 dark:to-lime-400 opacity-20 dark:opacity-10 transform rotate-6 scale-125"></div>
      <div class="relative p-6">
        <div class="text-center mb-4">
          <svg class="mx-auto h-16 w-16 text-lime-500 dark:text-fuchsia-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            <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>
        </div>
        <h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight text-center">Essential Python Cheat Sheet</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 text-center">A quick reference guide for Python syntax, functions, and common libraries.</p>
        <span class="block text-center text-xs font-semibold text-gray-500 dark:text-gray-400 mb-4">PDF, 2.5 MB</span>
        <button class="w-full py-3 px-6 rounded-lg bg-cyan-400 text-blue-900 dark:bg-electric-blue-500 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
          Download PDF
        </button>
      </div>
    </div>

  </div>
</div>

<style>
  /* Custom colors for Memphis theme */
  /* You would typically define these in tailwind.config.js */
  .bg-electric-blue-500 {
    background-color: #00FFFF; /* Aqua/Electric Blue */
  }
  .text-electric-blue-500 {
    color: #00FFFF;
  }
  .dark\:bg-electric-blue-500 {
    background-color: #00FFFF;
  }
  .dark\:text-electric-blue-400 {
    color: #00FFFF;
  }

  .bg-hot-pink-500 {
    background-color: #FF1493; /* Deep Pink/Hot Pink */
  }
  .text-hot-pink-600 {
    color: #C71585; /* Darker hot pink */
  }
  .dark\:bg-hot-pink-400 {
    background-color: #FF69B4; /* Lighter hot pink for dark mode */
  }
  .dark\:text-hot-pink-400 {
    color: #FF69B4;
  }

  .bg-lime-400 {
    background-color: #A3E635; /* Lime Green */
  }
  .text-lime-400 {
    color: #A3E635;
  }
  .text-lime-600 {
    color: #84CC16;
  }
  .dark\:bg-lime-400 {
    background-color: #BEF264; /* Lighter lime for dark mode */
  }
  .dark\:text-lime-400 {
    color: #BEF264;
  }

  .border-fuchsia-500 {
    border-color: #D946EF; /* Brighter fuchsia */
  }
  .border-cyan-400 {
    border-color: #22D3EE; /* Brighter cyan */
  }
  .border-hot-pink-400 {
    border-color: #FF69B4; 
  }
  .border-electric-blue-400 {
    border-color: #00FFFF;
  }

  /* Background gradients for overall theme */
  .from-purple-400 {
      --tw-gradient-from: #C084FC;
      --tw-gradient-to: rgba(192, 132, 252, 0);
  }
  .to-pink-500 {
      --tw-gradient-to: #EC4899;
  }

  .dark\:from-gray-900 {
      --tw-gradient-from: #111827;
      --tw-gradient-to: rgba(17, 24, 32, 0);
  }
  .dark\:to-purple-900 {
      --tw-gradient-to: #581C87;
  }
</style>

Playful_Booking_Media_Component

Un composant multimédia simple, ludique et réactif pour les systèmes de réservation, avec une palette de couleurs triadique, des éléments arrondis et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-blue-50 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-4 border-rose-400 dark:border-rose-600">
    <div class="relative bg-rose-200 dark:bg-rose-700 h-40 overflow-hidden flex items-center justify-center p-4">
      <img src="https://picsum.photos/400/250?random=1" alt="Booking header image" class="absolute inset-0 w-full h-full object-cover rounded-t-3xl opacity-80">
      <div class="absolute inset-0 bg-gradient-to-t from-rose-400/80 to-rose-200/50 dark:from-rose-800/80 dark:to-rose-700/50"></div>
      <h2 class="relative text-center text-3xl sm:text-4xl font-extrabold text-white dark:text-gray-100 drop-shadow-lg leading-tight p-2">
        Ready to Book Your Spot?
      </h2>
    </div>

    <div class="p-6 sm:p-8 space-y-6 text-center">
      <div class="flex justify-center -mt-16 mb-4">
        <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-yellow-300 dark:border-yellow-500 shadow-lg object-cover" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Service Provider Avatar">
      </div>
      
      <p class="text-gray-700 dark:text-gray-300 text-lg sm:text-xl font-semibold mb-4">
        Hello! I'm <span class="text-rose-500 dark:text-rose-400">Alex</span>,<br>your friendly service provider.
      </p>

      <p class="text-gray-600 dark:text-gray-400 text-base sm:text-lg leading-relaxed">
        Let's find the perfect time for your appointment. It's super easy!
      </p>

      <div class="flex flex-col sm:flex-row justify-center gap-4 pt-4">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 transition-colors duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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" />
          </svg>
          Book Now
        </a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-yellow-400 dark:border-yellow-600 text-base font-medium rounded-full text-yellow-600 dark:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-gray-800 transition-colors duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5L14.5 9l1.5-1.5L18 11.5V14a2 2 0 01-2 2H8a2 2 0 01-2-2V6a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5L14.5 9l1.5-1.5L18 11.5V14a2 2 0 01-2 2H8a2 2 0 01-2-2V6c0-1.1.9-2 2-2h3.28a1 1 0 01.948.684L10.5 9z" />
          </svg>
          Learn More
        </a>
      </div>
    </div>
  </div>
</div>

Industrial_Marketplace_Media_Component

Un composant multimédia simple, de style industriel, pour une place de marché, avec une image, un titre et un prix, en mettant l’accent sur les matériaux bruts et l’esthétique utilitaire. Utilise les couleurs d’automne et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md border border-amber-300 dark:border-zinc-700 font-sans">
  <div class="relative overflow-hidden mb-4 rounded-md border-2 border-amber-500 dark:border-zinc-600">
    <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-40 sm:h-48 object-cover transition-transform duration-300 hover:scale-105">
    <span class="absolute top-2 left-2 px-3 py-1 bg-amber-700 dark:bg-amber-600 text-white text-xs font-semibold uppercase rounded-full shadow-sm">New</span>
  </div>
  <h3 class="text-lg sm:text-xl font-bold text-amber-900 dark:text-amber-100 mb-1 leading-tight">
    Industrial Gear Crate
  </h3>
  <p class="text-sm text-amber-800 dark:text-amber-300 mb-3 line-clamp-2">
    A durable and versatile gear crate, perfect for workshop storage. Crafted from reclaimed metal. Made for heavy duty use.
  </p>
  <div class="flex items-center justify-between">
    <span class="text-xl sm:text-2xl font-extrabold text-amber-700 dark:text-amber-400">
      $49.99
    </span>
    <button class="px-4 py-2 bg-amber-600 dark:bg-amber-700 text-white text-sm font-semibold rounded-md shadow-lg hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      Add to Cart
    </button>
  </div>
</div>

Composant Composants multimédias

Un composant multimédia d’interface utilisateur complexe en mode sombre pour la documentation/les sites wiki, avec un schéma de couleurs arc-en-ciel dégradé. Il comprend différents types de médias tels que la vidéo, l’audio et les images avec des informations détaillées et des éléments interactifs, tous réactifs et utilisant le HTML sémantique.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-950 dark:bg-gray-950 text-gray-200 p-4 sm:p-8 lg:p-12 font-sans overflow-hidden">

  <div class="max-w-7xl mx-auto space-y-12">

    <!-- Page Title/Header -->
    <header class="mb-8">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold pb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-purple-400 dark:via-pink-400 dark:to-red-400">
        Multimedia Gallery
      </h1>
      <p class="text-lg sm:text-xl text-gray-400 dark:text-gray-500 max-w-3xl">
        Explore a rich collection of videos, audio clips, and images. Each item offers detailed information and quick access for learning.
      </p>
    </header>

    <!-- Main Grid Layout for Media Categories -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Video Section -->
      <section class="rounded-xl shadow-lg p-6 relative overflow-hidden"
        style="background: linear-gradient(135deg, rgba(30,30,40,0.8), rgba(60,20,60,0.8)); border: 1px solid rgba(100,50,100,0.5);">
        <div class="absolute inset-0 blur-xl opacity-20" style="background: radial-gradient(circle at top left, #6B46C1, transparent 50%), radial-gradient(circle at bottom right, #FF0077, transparent 50%);"></div>
        <div class="relative z-10">
          <h2 class="text-2xl font-bold mb-4 text-purple-300 dark:text-purple-400">Video Tutorials</h2>
          <div class="space-y-6">

            <!-- Video Card 1 -->
            <article class="bg-violet-900 bg-opacity-30 rounded-lg p-4 flex flex-col sm:flex-row items-start gap-4 border border-violet-800 border-opacity-50 hover:border-violet-700 hover:bg-violet-900 hover:bg-opacity-50 transition duration-300">
              <div class="relative w-full sm:w-40 h-24 sm:h-24 flex-shrink-0 rounded-md overflow-hidden bg-gray-800">
                <img src="https://picsum.photos/300/200?random=1" alt="Video Thumbnail" class="w-full h-full object-cover">
                <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
                  <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z"/>
                  </svg>
                </div>
              </div>
              <div class="flex-grow">
                <h3 class="text-lg font-semibold text-gray-100 mb-1">Understanding Async/Await</h3>
                <p class="text-sm text-gray-400 mb-2 line-clamp-2">Delve into the complexities of asynchronous programming patterns with practical examples.</p>
                <div class="flex items-center text-sm text-gray-500">
                  <span class="mr-2">12:45</span> 
                  <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2">
                  <span>Jane Doe</span>
                </div>
              </div>
            </article>

            <!-- Video Card 2 -->
            <article class="bg-violet-900 bg-opacity-30 rounded-lg p-4 flex flex-col sm:flex-row items-start gap-4 border border-violet-800 border-opacity-50 hover:border-violet-700 hover:bg-violet-900 hover:bg-opacity-50 transition duration-300">
              <div class="relative w-full sm:w-40 h-24 sm:h-24 flex-shrink-0 rounded-md overflow-hidden bg-gray-800">
                <img src="https://picsum.photos/300/200?random=2" alt="Video Thumbnail" class="w-full h-full object-cover">
                <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
                  <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z"/>
                  </svg>
                </div>
              </div>
              <div class="flex-grow">
                <h3 class="text-lg font-semibold text-gray-100 mb-1">CSS Grid Fundamentals</h3>
                <p class="text-sm text-gray-400 mb-2 line-clamp-2">Master the basics of CSS Grid for responsive and robust web layouts.</p>
                <div class="flex items-center text-sm text-gray-500">
                  <span class="mr-2">08:30</span>
                  <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2">
                  <span>John Smith</span>
                </div>
              </div>
            </article>

             <a href="#" class="mt-4 block text-center text-purple-400 hover:text-purple-300 font-semibold transition-colors duration-300">View all videos &rarr;</a>

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

      <!-- Audio Section -->
      <section class="rounded-xl shadow-lg p-6 relative overflow-hidden"
        style="background: linear-gradient(135deg, rgba(30,30,40,0.8), rgba(60,20,40,0.8)); border: 1px solid rgba(130,50,70,0.5);">
        <div class="absolute inset-0 blur-xl opacity-20" style="background: radial-gradient(circle at top left, #FF0055, transparent 50%), radial-gradient(circle at bottom right, #FFAA33, transparent 50%);"></div>
        <div class="relative z-10">
          <h2 class="text-2xl font-bold mb-4 text-pink-300 dark:text-pink-400">Audio Lectures</h2>
          <div class="space-y-6">

            <!-- Audio Card 1 -->
            <article class="bg-red-900 bg-opacity-30 rounded-lg p-4 flex flex-col sm:flex-row items-center gap-4 border border-red-800 border-opacity-50 hover:border-red-700 hover:bg-red-900 hover:bg-opacity-50 transition duration-300">
              <div class="flex-shrink-0 p-2 rounded-full border border-red-700 bg-red-800 bg-opacity-70">
                <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6zm-2 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
                </svg>
              </div>
              <div class="flex-grow text-center sm:text-left">
                <h3 class="text-lg font-semibold text-gray-100 mb-1">The Future of AI Ethics</h3>
                <p class="text-sm text-gray-400 mb-2 line-clamp-2">An insightful discussion on the ethical implications of advanced AI development.</p>
                <div class="flex items-center justify-center sm:justify-start text-sm text-gray-500">
                  <span class="mr-2">45:10</span>
                  <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Speaker Avatar" class="w-6 h-6 rounded-full mr-2">
                  <span>David Lee</span>
                </div>
              </div>
            </article>

            <!-- Audio Card 2 -->
            <article class="bg-red-900 bg-opacity-30 rounded-lg p-4 flex flex-col sm:flex-row items-center gap-4 border border-red-800 border-opacity-50 hover:border-red-700 hover:bg-red-900 hover:bg-opacity-50 transition duration-300">
              <div class="flex-shrink-0 p-2 rounded-full border border-red-700 bg-red-800 bg-opacity-70">
                <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6zm-2 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
                </svg>
              </div>
              <div class="flex-grow text-center sm:text-left">
                <h3 class="text-lg font-semibold text-gray-100 mb-1">Quantum Computing Explained</h3>
                <p class="text-sm text-gray-400 mb-2 line-clamp-2">Demystifying the principles and potential of quantum computing for beginners.</p>
                <div class="flex items-center justify-center sm:justify-start text-sm text-gray-500">
                  <span class="mr-2">32:00</span>
                  <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Speaker Avatar" class="w-6 h-6 rounded-full mr-2">
                  <span>Sarah Chen</span>
                </div>
              </div>
            </article>

            <a href="#" class="mt-4 block text-center text-pink-400 hover:text-pink-300 font-semibold transition-colors duration-300">Browse all audio &rarr;</a>

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

      <!-- Image Gallery Section -->
      <section class="rounded-xl shadow-lg p-6 relative overflow-hidden lg:col-span-1"
        style="background: linear-gradient(135deg, rgba(30,30,40,0.8), rgba(40,40,60,0.8)); border: 1px solid rgba(80,80,120,0.5);">
        <div class="absolute inset-0 blur-xl opacity-20" style="background: radial-gradient(circle at top left, #33CCFF, transparent 50%), radial-gradient(circle at bottom right, #BB66FF, transparent 50%);"></div>
        <div class="relative z-10">
          <h2 class="text-2xl font-bold mb-4 text-sky-300 dark:text-sky-400">Visual Assets</h2>
          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">

            <!-- Image Card 1 -->
            <figure class="group relative rounded-lg overflow-hidden bg-gray-800 aspect-video col-span-2 sm:col-span-1 lg:col-span-1 xl:col-span-1">
              <img src="https://picsum.photos/400/250?random=3" alt="Abstract Design" class="w-full h-full object-cover transform group-hover:scale-105 transition duration-300">
              <figcaption class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3">
                <h3 class="text-sm font-semibold text-white">Futuristic Cityscape</h3>
              </figcaption>
            </figure>

            <!-- Image Card 2 -->
            <figure class="group relative rounded-lg overflow-hidden bg-gray-800 aspect-video col-span-1">
              <img src="https://picsum.photos/400/250?random=4" alt="Data Visualization" class="w-full h-full object-cover transform group-hover:scale-105 transition duration-300">
              <figcaption class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3">
                <h3 class="text-sm font-semibold text-white">Complex Algorithms</h3>
              </figcaption>
            </figure>

            <!-- Image Card 3 -->
            <figure class="group relative rounded-lg overflow-hidden bg-gray-800 aspect-video col-span-1">
              <img src="https://picsum.photos/400/250?random=5" alt="Network Connections" class="w-full h-full object-cover transform group-hover:scale-105 transition duration-300">
              <figcaption class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3">
                <h3 class="text-sm font-semibold text-white">Global Connectivity</h3>
              </figcaption>
            </figure>

            <!-- Image Card 4 -->
            <figure class="group relative rounded-lg overflow-hidden bg-gray-800 aspect-video col-span-1">
              <img src="https://picsum.photos/400/250?random=6" alt="Servers and Data" class="w-full h-full object-cover transform group-hover:scale-105 transition duration-300">
              <figcaption class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3">
                <h3 class="text-sm font-semibold text-white">Cloud Infrastructure</h3>
              </figcaption>
            </figure>

            <!-- Image Card 5 -->
            <figure class="group relative rounded-lg overflow-hidden bg-gray-800 aspect-video col-span-1">
              <img src="https://picsum.photos/400/250?random=7" alt="Coding on Screen" class="w-full h-full object-cover transform group-hover:scale-105 transition duration-300">
              <figcaption class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3">
                <h3 class="text-sm font-semibold text-white">Developer Workflow</h3>
              </figcaption>
            </figure>

          </div>
          <a href="#" class="mt-4 block text-center text-sky-400 hover:text-sky-300 font-semibold transition-colors duration-300">View all images &rarr;</a>

        </div>
      </section>

    </div>

    <!-- Featured Media Section (Example of a larger, dedicated media element) -->
    <section class="rounded-xl shadow-lg p-6 relative overflow-hidden lg:flex lg:items-center lg:space-x-8"
      style="background: linear-gradient(135deg, rgba(20,20,30,0.8), rgba(50,30,50,0.8)); border: 1px solid rgba(100,50,120,0.5);">
      <div class="absolute inset-0 blur-xl opacity-20" style="background: radial-gradient(circle at top right, #FF0099, transparent 50%), radial-gradient(circle at bottom left, #00CCFF, transparent 50%);"></div>
      <div class="relative z-10 w-full lg:w-2/5 flex-shrink-0">
        <h2 class="text-3xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-purple-400 dark:from-red-300 dark:to-purple-300">Featured Research Explainer</h2>
        <div class="relative aspect-video rounded-lg overflow-hidden bg-gray-800 mb-4">
          <img src="https://picsum.photos/600/400?random=8" alt="Featured Video Thumbnail" class="w-full h-full object-cover">
          <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-60">
            <button aria-label="Play video" class="group p-4 bg-purple-600 rounded-full hover:bg-purple-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
              <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z"/>
              </svg>
            </button>
          </div>
        </div>
        <div class="flex items-center justify-between text-sm text-gray-400">
          <span>Duration: 18:00</span>
          <span>Published: 2023-10-26</span>
        </div>
      </div>
      <div class="relative z-10 w-full lg:w-3/5 mt-6 lg:mt-0">
        <p class="text-lg text-gray-300 mb-4 leading-relaxed">
          This comprehensive video delves into the latest breakthroughs in <strong class="text-red-300">synthetic biology</strong>, exploring its ethical dimensions and potential societal impact.
          Learn about CRISPR technology, genetic engineering, and the future of bio-innovations.
        </p>
        <p class="text-md text-gray-400 mb-6">
          <span class="font-medium text-gray-300">Tags:</span> #SyntheticBiology #CRISPR #Bioethics #GeneticEngineering #FutureTech
        </p>
        <div class="flex items-center space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/women/5.jpg" alt="Presenter Avatar" class="w-10 h-10 rounded-full ring-2 ring-purple-500">
          <div>
            <p class="font-semibold text-gray-100">Dr. Elena Rodriguez</p>
            <p class="text-sm text-gray-500">Lead Researcher, BioTech Institute</p>
          </div>
        </div>
        <a href="#" class="inline-flex items-center px-6 py-3 rounded-full font-semibold bg-gradient-to-r from-red-600 to-purple-800 text-white shadow-lg hover:from-white hover:to-white hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-300 group">
            Watch Full Video
            <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
            </svg>
        </a>
      </div>
    </section>

  </div>
</div>

Bauhaus_E-commerce_Media_Component

Un composant multimédia de commerce électronique réactif et fonctionnel avec un design monochrome inspiré du Bauhaus, une prise en charge du mode sombre, mettant l’accent sur les formes géométriques et une hiérarchie visuelle claire pour la présentation des produits.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 bg-white dark:bg-gray-800 shadow-lg rounded-none overflow-hidden">

    <!-- Product Image Section -->
    <div class="relative col-span-1 md:col-span-2 lg:col-span-1 border-b-2 md:border-r-2 lg:border-r-2 md:border-b-0 border-gray-200 dark:border-gray-700 p-4 sm:p-6 grid place-items-center">
      <img src="https://picsum.photos/id/1018/800/600" alt="Modern Product Image" class="w-full h-auto object-cover max-h-96 md:max-h-full aspect-square" loading="lazy">
      <div class="absolute top-0 left-0 bg-yellow-400 dark:bg-yellow-600 text-gray-900 dark:text-white px-3 py-1 text-xs font-semibold uppercase tracking-wider -rotate-45 -translate-x-6 translate-y-6 pt-4 pr-4">
        New
      </div>
    </div>

    <!-- Product Details Section -->
    <div class="p-4 sm:p-6 lg:p-8 flex flex-col justify-between col-span-1">
      <div>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-4 leading-tight">
          Geometric Lamp
        </h2>
        <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-4 sm:mb-6 leading-relaxed">
          A fusion of form and function. This lamp embodies the Bauhaus principle of design simplicity and utility.
        </p>
        <div class="flex items-baseline mb-4 sm:mb-6">
          <span class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mr-2">$199.99</span>
          <span class="text-lg sm:text-xl text-gray-500 dark:text-gray-400 line-through">$249.99</span>
        </div>
        <div class="mb-4 sm:mb-6">
          <h3 class="text-sm uppercase tracking-wide font-semibold text-gray-700 dark:text-gray-300 mb-2">Color</h3>
          <div class="flex space-x-2">
            <button aria-label="Select black color" class="w-8 h-8 rounded-full bg-gray-900 dark:bg-gray-100 ring-2 ring-transparent hover:ring-gray-400 dark:hover:ring-gray-600 focus:ring-gray-400 focus:outline-none transition-colors duration-200"></button>
            <button aria-label="Select white color" class="w-8 h-8 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 ring-2 ring-gray-900 dark:ring-white focus:ring-gray-900 focus:outline-none transition-colors duration-200"></button>
            <button aria-label="Select gray color" class="w-8 h-8 rounded-full bg-gray-500 dark:bg-gray-500 ring-2 ring-transparent hover:ring-gray-400 dark:hover:ring-gray-600 focus:ring-gray-400 focus:outline-none transition-colors duration-200"></button>
          </div>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
        <button class="flex-1 py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-lg font-bold uppercase tracking-wider shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          Add to Cart
        </button>
        <button aria-label="Add to Wishlist" class="py-3 px-6 border-2 border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100 text-lg font-bold uppercase tracking-wider hover:bg-gray-900 hover:text-white dark:hover:bg-gray-100 dark:hover:text-gray-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" 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" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Additional Information / Reviews Section -->
    <div class="p-4 sm:p-6 lg:p-8 col-span-1 lg:col-span-1 border-t-2 md:border-t-0 lg:border-t-0 md:border-l-2 border-gray-200 dark:border-gray-700 flex flex-col justify-between">
      <div>
        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-3">Product Features</h3>
        <ul class="list-none space-y-2 text-gray-700 dark:text-gray-300 mb-6">
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Durable Steel Structure</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Adjustable Brightness</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Energy Efficient LED</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Minimalist Design Aesthetic</li>
        </ul>

        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-3">Customer Reviews</h3>
        <div class="flex items-center text-gray-800 dark:text-gray-200 mb-4">
          <div class="flex text-yellow-400 dark:text-yellow-500 mr-2">
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
          </div>
          <span class="text-sm italic">(45 Reviews)</span>
        </div>

        <article class="bg-gray-50 dark:bg-gray-700 p-4 rounded-none border border-gray-200 dark:border-gray-600 mb-4">
          <div class="flex items-center mb-2">
            <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-gray-300 dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Verified Purchase</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">"Absolutely love the design! Fits perfectly with my minimalist interior. The light is soft but bright enough for reading."</p>
        </article>
      </div>
    </div>

  </div>
</div>

Monospace_Developer_Media_Component

Un composant multimédia complexe, orienté vers l’éducation, avec un style de conception monospace/développeur et une palette de couleurs océan/bleu, conçu pour les plateformes d’apprentissage. Comprend la lecture multimédia, des extraits de code et des sections de contenu structuré.

Ouvrir Aperçu

                <div class="font-['Menlo',_Monaco,_Consolas,_'Liberation_Mono',_'Courier_New',_monospace] bg-gray-50 text-blue-900 min-h-screen p-4 dark:bg-gray-900 dark:text-blue-100 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
    <!-- Header/Title Section -->
    <header class="bg-blue-800 text-white p-4 flex items-center justify-between dark:bg-blue-900">
      <h1 class="text-xl font-bold flex items-center">
        <svg class="w-6 h-6 mr-2 text-blue-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.316 3.051A1 1 0 0113 2v2.247a1 1 0 01-.018.067L10.021 12.5h-2.11C5.698 12.5 5 13.197 5 14s.698 1.5 1.5 1.5h1.968l-3.328 3.328A1 1 0 016.328 20L9 17.328l3.328 3.328A1 1 0 0113.672 20L11 17.328l3.672-3.672A1 1 0 0115 13c-.001-.01-.004-.019-.009-.028-.684-1.12-1.921-1.872-3.327-1.977l.006-8.084zM10 5.25v6.5h-2.25v-6.5zm-3 3.5v-3.5h-1.5v3.5zm6 0v-3.5h1.5v3.5zM12 7.75v3.5h1.5v-3.5zm-3 3.5v-3.5h-1.5v3.5z" clip-rule="evenodd"></path></svg>
        Module: Introduction to Data Structures
      </h1>
      <div class="flex space-x-3">
        <button class="px-3 py-1 bg-blue-700 rounded text-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Download Resources</button>
        <button class="px-3 py-1 bg-blue-700 rounded text-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Mark Complete</button>
      </div>
    </header>

    <!-- Main Content Area -->
    <div class="md:flex">
      <!-- Left Column: Video Player & Description -->
      <section class="md:w-3/5 p-6 border-r border-blue-100 dark:border-blue-700">
        <div class="aspect-w-16 aspect-h-9 bg-black rounded overflow-hidden mb-6 border border-blue-500 dark:border-blue-600">
          <iframe class="w-full h-full" 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>

        <h2 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-200">Lesson 1: Understanding Arrays</h2>
        <p class="mb-4 leading-relaxed text-gray-700 dark:text-gray-300">
          Arrays are fundamental data structures that store a fixed-size sequential collection of elements of the same type. This lesson covers their basic definition, memory allocation, and common operations like initialization, accessing elements, and basic traversal.
        </p>
        \div class="text-sm text-gray-600 dark:text-gray-400 mb-6">
          <p>Published: <time datetime="2023-10-26">October 26, 2023</time></p>
          <p>Instructor: Dr. Alice Smith</p>
        </div">

        <!-- Key Concepts Section -->
        <article class="border-t border-b border-blue-200 py-6 mb-6 dark:border-blue-700">
          <h3 class="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">Key Concepts</h3>
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 marker:text-blue-600 dark:marker:text-blue-400">
            <li class="mb-2">Definition of an array and its contiguous memory allocation.</li>
            <li class="mb-2">Indexing: zero-based vs. one-based.</li>
            <li class="mb-2">Common operations: declaration, initialization, element access, and update.</li>
            <li>Distinction between static and dynamic arrays.</li>
          </ul>
        </article>

        <!-- Further Reading -->
        <article>
          <h3 class="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">Further Reading</h3>
          <ul class="space-y-3">
            <li><a href="#" class="flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors"><svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> Wikipedia: Array Data Structure</a></li>
            <li><a href="#" class="flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors"><svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> GeeksforGeeks: Arrays</a></li>
          </ul>
        </article>
      </section>

      <!-- Right Column: Code Snippets, Q&A, and Navigation -->
      <aside class="md:w-2/5 p-6 bg-blue-50 dark:bg-gray-850">
        <!-- Code Snippet Section -->
        <div class="mb-6">
          <h3 class="text-xl font-semibold mb-3 text-blue-800 dark:text-blue-200">Code Example: Array Initialization (Python)</h3>
          <pre class="bg-blue-900 text-blue-50 p-4 rounded-md text-sm overflow-x-auto dark:bg-gray-950 dark:text-gray-100 border border-blue-700 dark:border-blue-700">
            <code class="language-python">
# Declaring and initializing an array
my_array = [10, 20, 30, 40, 50]

# Accessing an element
print(f"First element: {my_array[0]}") # Output: 10

# Iterating through an array
for element in my_array:
    print(element)
            </code>
          </pre>
        </div>

        <!-- Table of Contents / Navigation -->
        <nav class="mb-6">
          <h3 class="text-xl font-semibold mb-3 text-blue-800 dark:text-blue-200">Module Navigation</h3>
          <ul class="space-y-2">
            <li><a href="#" class="block p-3 bg-blue-100 rounded hover:bg-blue-200 text-blue-800 font-medium dark:bg-blue-700 dark:hover:bg-blue-600 dark:text-blue-100 transition-colors"><span class="mr-2 text-blue-600 dark:text-blue-200">&#9658;</span> Lesson 1: Understanding Arrays <span class="text-xs text-blue-500 dark:text-blue-300 ml-2">(Current)</span></a></li>
            <li><a href="#" class="block p-3 rounded hover:bg-blue-100 text-gray-700 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-blue-100 transition-colors"><span class="mr-2 text-gray-400 dark:text-blue-500">&#9658;</span> Lesson 2: Array Operations</a></li>
            <li><a href="#" class="block p-3 rounded hover:bg-blue-100 text-gray-700 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-blue-100 transition-colors"><span class="mr-2 text-gray-400 dark:text-blue-500">&#9658;</span> Lesson 3: Multidimensional Arrays</a></li>
            <li><a href="#" class="block p-3 rounded hover:bg-blue-100 text-gray-700 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-blue-100 transition-colors"><span class="mr-2 text-gray-400 dark:text-blue-500">&#9658;</span> Quiz: Array Fundamentals</a></li>
          </ul>
        </nav>

        <!-- Instructor Profile -->
        <div class="bg-white rounded-lg shadow-sm p-4 text-center dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
          <h3 class="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">Instructor Info</h3>
          <img class="w-24 h-24 rounded-full mx-auto mb-3 border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Instructor Alice Smith">
          <p class="text-lg font-bold text-blue-800 dark:text-blue-200">Dr. Alice Smith</p>
          <p class="text-xs text-gray-600 dark:text-gray-400 mb-3">Lead Data Scientist & Adjunct Professor</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Specializing in algorithms and complex data structures. Passionate about making computer science accessible.</p>
        </div>
      </aside>
    </div>

    <!-- Comments/Questions Section (Placeholder) -->
    <section class="bg-blue-50 p-6 border-t border-blue-100 dark:bg-gray-850 dark:border-blue-700">
      <h2 class="text-2xl font-bold mb-4 text-blue-800 dark:text-blue-200">Questions & Discussion</h2>
      <div class="bg-white rounded-lg p-4 shadow-sm dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
        <p class="text-gray-700 dark:text-gray-300">No questions yet. Be the first to ask!</p>
        <button class="mt-4 px-4 py-2 bg-blue-700 text-white rounded hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Ask a Question</button>
      </div>
    </section>

    <!-- Footer -->
    <footer class="bg-blue-800 text-white p-4 text-center text-sm dark:bg-blue-900">
      &copy; 2023 Learning Platform. All rights reserved.
    </footer>
  </div>
</div>

Composant multimédia de voyage Art déco

Il s’agit d’un composant multimédia complexe d’inspiration Art déco pour les sites Web de voyage et de tourisme, mettant en vedette les points forts de la destination avec des tons sépia/bruns et des motifs géométriques. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans bg-amber-50 dark:bg-stone-950 text-stone-800 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 antialiased">

  <!-- Outer Deco Frame -->
  <div class="relative border-[6px] border-amber-900/60 dark:border-stone-700/60 p-4 sm:p-6 md:p-8 lg:p-10 shadow-2xl dark:shadow-stone-950/70 overflow-hidden">
    <div class="absolute inset-0 border-[3px] border-solid border-amber-800/40 dark:border-stone-800/40 opacity-70"></div>
    <div class="absolute inset-4 -m-[2px] border-[2px] border-dashed border-amber-700/30 dark:border-stone-600/30 opacity-50"></div>

    <!-- Background Geometric Pattern (Subtle) -->
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(255,247,237,0.3)_0%,transparent_100%)] dark:bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(60,60,60,0.3)_0%,transparent_100%)] z-0"></div>
    <div class="absolute inset-0 opacity-10 dark:opacity-5 bg-[size:30px_30px] bg-[repeating-linear-gradient(45deg,_var(--tw-gradient-from)_0,_var(--tw-gradient-from)_1px,_transparent_1px,_transparent_8px),repeating-linear-gradient(-45deg,_var(--tw-gradient-from)_0,_var(--tw-gradient-from)_1px,_transparent_1px,_transparent_8px)] from-amber-700/30 to-amber-700/30 dark:from-stone-700/30 dark:to-stone-700/30 z-0"></div>

    <div class="relative z-10 grid grid-cols-1 lg:grid-cols-3 gap-8 md:gap-12 lg:gap-16">

      <!-- Left Section: Main Media Display -->
      <div class="lg:col-span-2 flex flex-col items-center">
        <div class="w-full aspect-video md:aspect-[16/9] bg-stone-200 dark:bg-stone-800 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50 overflow-hidden relative">
          <img src="https://picsum.photos/id/1010/1200/700" alt="Panoramic view of ancient city" class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-105">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent">
            <div class="absolute bottom-0 left-0 p-4 sm:p-6 text-white">
              <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-serif tracking-wider leading-tight text-amber-50 drop-shadow-lg">Mysteries of the Nile</h2>
              <p class="mt-2 text-base sm:text-lg opacity-90 max-w-lg hidden sm:block">Explore ancient wonders and timeless landscapes on a journey through history.</p>
            </div>
            <div class="absolute top-4 right-4 bg-amber-800/80 dark:bg-stone-800/80 text-white px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-semibold tracking-wider uppercase border border-amber-700 dark:border-stone-700 shadow-md">
              Featured Destination
            </div>
          </div>
        </div>

        <!-- Controls/Navigation (Optional: if this were interactive) -->
        <div class="mt-6 w-full flex justify-center space-x-4">
          <button class="flex-shrink-0 w-12 h-12 md:w-16 md:h-16 bg-amber-900 dark:bg-stone-800 text-amber-50 dark:text-stone-300 rounded-full border-2 border-amber-700 dark:border-stone-700 flex items-center justify-center shadow-lg dark:shadow-stone-900/50 hover:bg-amber-800 transform hover:scale-105 transition-all duration-300">
            <svg class="w-6 h-6 md:w-8 md:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <button class="flex-shrink-0 w-12 h-12 md:w-16 md:h-16 bg-amber-900 dark:bg-stone-800 text-amber-50 dark:text-stone-300 rounded-full border-2 border-amber-700 dark:border-stone-700 flex items-center justify-center shadow-lg dark:shadow-stone-900/50 hover:bg-amber-800 transform hover:scale-105 transition-all duration-300">
            <svg class="w-6 h-6 md:w-8 md:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>
      </div>

      <!-- Right Section: Details & Features -->
      <div class="lg:col-span-1">
        <div class="bg-amber-100 dark:bg-stone-900 p-6 sm:p-8 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50">
          <h3 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-200 tracking-wide mb-4 border-b-2 border-amber-700/60 dark:border-stone-700/60 pb-2">Journey Highlights</h3>

          <div class="grid gap-4">
            <!-- Highlight 1 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1020/80/80" alt="Pyramid" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Ancient Pyramids</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Unravel the secrets of Giza's majestic structures.</p>
              </div>
            </div>

            <!-- Highlight 2 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1025/80/80" alt="Desert Sunset" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Desert Safaris</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Experience the golden dunes at dusk.</p>
              </div>
            </div>

            <!-- Highlight 3 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1038/80/80" alt="River Boat" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Nile River Cruises</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Leisurely cruising through history.</p>
              </div>
            </div>
          </div>

          <div class="mt-8">
            <p class="text-sm sm:text-base text-stone-600 dark:text-stone-400 mb-2">Discover more about this exquisite journey:</p>
            <button class="w-full bg-amber-800 dark:bg-stone-700 text-white font-bold text-lg sm:text-xl py-3 px-6 rounded-md shadow-lg dark:shadow-stone-900/50 hover:bg-amber-700 dark:hover:bg-stone-600 transform hover:scale-105 transition-all duration-300 border-2 border-amber-700 dark:border-stone-600 tracking-wider uppercase">
              Book Your Adventure
            </button>
          </div>
        </div>

        <!-- Traveler Reviews/Profiles -->
        <div class="mt-8 bg-amber-100 dark:bg-stone-900 p-6 sm:p-8 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50">
          <h3 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-200 tracking-wide mb-4 border-b-2 border-amber-700/60 dark:border-stone-700/60 pb-2">Traveler's Voice</h3>
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Traveler Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-amber-700 dark:border-stone-600 shadow-md">
            <div>
              <p class="font-bold text-lg text-amber-900 dark:text-stone-100">Eleanor Vance</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">"A truly unforgettable experience!"</p>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Traveler Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-amber-700 dark:border-stone-600 shadow-md">
            <div>
              <p class="font-bold text-lg text-amber-900 dark:text-stone-100">Arthur Sterling</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">"Seamless and breathtaking."</p>
            </div>
          </div>
        </div>

      </div>

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

Skeuomorphic_Grayscale_Media_Component

Un composant multimédia complexe et réactif conçu dans un style skeuomorphe en niveaux de gris pour les sites Web d’entreprise, avec plusieurs éléments interactifs et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-8 md:p-12 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl p-6 md:p-10 rounded-3xl shadow-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
      flex flex-col lg:flex-row gap-8 lg:gap-12 relative overflow-hidden
      after:content-[''] after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40 after:pointer-events-none after:z-10">

    <!-- Main Media Display Area -->
    <div class="flex-1 flex flex-col items-center justify-center p-4 sm:p-6 md:p-8
        rounded-2xl shadow-inner-xl bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800
        relative group overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-950 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <div class="relative z-10 w-full h-full min-h-[300px] md:min-h-[400px] lg:min-h-[500px] flex items-center justify-center">
        <img src="https://picsum.photos/1200/800?random=1" alt="Main Media Content" class="rounded-xl shadow-lg border border-gray-400 dark:border-gray-600 object-cover w-full h-full">
        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <button class="p-4 rounded-full bg-gray-700 bg-opacity-70 text-white shadow-lg animate-pulse
                         hover:bg-gray-800 hover:bg-opacity-80 transition-colors duration-300
                         focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-60">
            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="absolute bottom-4 left-4 right-4 p-3 rounded-xl bg-gray-800 bg-opacity-70 text-white font-mono text-sm
                  shadow-xl dark:border dark:border-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div class="flex items-center justify-between">
          <span class="truncate">nature-mountains_adventure.jpg</span>
          <svg class="w-5 h-5 ml-2" 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 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Right Sidebar: Details & Controls -->
    <div class="lg:w-2/5 xl:w-1/3 flex flex-col gap-6">

      <!-- Section: Media Information -->
      <div class="p-6 rounded-2xl shadow-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
          relative after:content-[''] after:absolute after:inset-0 after:rounded-2xl after:ring-2 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Media Information</h3>
        <dl class="text-sm text-gray-700 dark:text-gray-300 space-y-2">
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Title:</dt>
            <dd class="ml-4">Serene Mountain Landscape</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Type:</dt>
            <dd class="ml-4">Image (JPEG)</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Resolution:</dt>
            <dd class="ml-4">1920x1280</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Size:</dt>
            <dd class="ml-4">2.1 MB</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Uploaded By:</dt>
            <dd class="ml-4 flex items-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Uploader" class="w-6 h-6 rounded-full mr-2 shadow-sm border border-gray-400 dark:border-gray-600">
              John Doe
            </dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Date:</dt>
            <dd class="ml-4">2023-10-26</dd>
          </div>
        </dl>
      </div>

      <!-- Section: Action Controls -->
      <div class="p-6 rounded-2xl shadow-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
          relative after:content-[''] after:absolute after:inset-0 after:rounded-2xl after:ring-2 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Actions</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button class="flex items-center justify-center px-4 py-3 rounded-xl 
                         bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 
                         text-gray-800 dark:text-gray-200 font-semibold shadow-md border border-gray-400 dark:border-gray-600
                         hover:from-gray-400 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-700 hover:shadow-lg transition-all duration-200
                         active:shadow-inner active:from-gray-500 active:to-gray-400 dark:active:from-gray-800 dark:active:to-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" 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-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path>
            </svg>
            Preview
          </button>
          <button class="flex items-center justify-center px-4 py-3 rounded-xl 
                         bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 
                         text-gray-800 dark:text-gray-200 font-semibold shadow-md border border-gray-400 dark:border-gray-600
                         hover:from-gray-400 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-700 hover:shadow-lg transition-all duration-200
                         active:shadow-inner active:from-gray-500 active:to-gray-400 dark:active:from-gray-800 dark:active:to-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
              <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path>
            </svg>
            Download
          </button>
          <button class="flex items-center justify-center px-4 py-3 rounded-xl sm:col-span-2
                         bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 
                         text-gray-800 dark:text-gray-200 font-semibold shadow-md border border-gray-400 dark:border-gray-600
                         hover:from-gray-400 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-700 hover:shadow-lg transition-all duration-200
                         active:shadow-inner active:from-gray-500 active:to-gray-400 dark:active:from-gray-800 dark:active:to-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
              <path d="M16 12l-4 4-4-4M12 20v-8M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            Share Link
          </button>
        </div>
      </div>

      <!-- Section: Tags/Categories -->
      <div class="p-6 rounded-2xl shadow-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
          relative after:content-[''] after:absolute after:inset-0 after:rounded-2xl after:ring-2 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Tags & Categories</h3>
        <div class="flex flex-wrap gap-2">
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Nature
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Landscape
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Mountains
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Outdoor
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Photography
          </span>
        </div>
      </div>

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

Composant Composants multimédias

Un composant multimédia pour le commerce électronique avec des micro-interactions, une palette de couleurs en niveaux de gris, une complexité modérée, un design réactif et une prise en charge des thèmes sombres.

Ouvrir Aperçu

                <div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
  <div class="relative">
    <img class="object-cover w-full h-48 transition-transform duration-300 transform group-hover:scale-105" src="https://picsum.photos/400/300?random=1"
      alt="Product Image">
    <div
      class="absolute top-0 left-0 flex items-center justify-center w-full h-full text-white transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
      <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
        </path>
      </svg>
    </div>
  </div>
  <div class="px-4 py-3">
    <h3 class="text-lg font-medium text-gray-800 dark:text-white">Product Name</h3>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Short product description goes here.</p>
    <div class="flex items-center justify-between mt-3">
      <span class="text-xl font-bold text-gray-800 dark:text-white">$29.99</span>
      <button
        class="px-3 py-2 text-xs font-medium text-white uppercase transition-colors duration-300 transform bg-gray-800 rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>

Composant Composants multimédias

Composant multimédia 3D pour les médias sociaux avec une palette de couleurs complémentaire, une complexité modérée et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex justify-center items-center p-4">
  <div class="bg-gradient-to-br from-blue-400 to-indigo-500 dark:from-blue-700 dark:to-indigo-900 rounded-3xl shadow-2xl p-6 lg:p-10 transform rotate-y-12 hover:rotate-y-0 transition-transform duration-700 ease-in-out relative overflow-hidden max-w-lg w-full">
    <!-- 3D elements for depth -->
    <div class="absolute top-0 left-0 w-full h-full bg-black opacity-10 rounded-3xl transform translateZ(-10px)"></div>
    <div class="absolute bottom-0 right-0 w-full h-full bg-white opacity-10 rounded-3xl transform translateZ(-20px)"></div>

    <div class="relative z-10">
      <div class="flex items-center mb-6">
        <img class="w-16 h-16 rounded-full border-4 border-amber-300 dark:border-amber-500 shadow-lg transform translateZ(15px)" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
        <div class="ml-4">
          <p class="text-white text-xl font-bold transform translateZ(10px)">John Doe</p>
          <p class="text-amber-200 dark:text-amber-400 text-sm transform translateZ(10px)">@john_doe_official</p>
        </div>
      </div>

      <div class="relative w-full h-64 rounded-xl overflow-hidden shadow-xl mb-6 transform translateZ(5px)">
        <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=1" alt="Post Image">
        <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300">
          <svg class="h-16 w-16 text-white" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </div>
      </div>

      <p class="text-white text-lg mb-6 leading-relaxed transform translateZ(10px)">
        Excited to share my latest project! It was a challenging but rewarding experience. #webdesign #creative #tailwindcss
      </p>

      <div class="flex justify-between items-center text-white">
        <div class="flex items-center space-x-4">
          <div class="flex items-center transform translateZ(8px)">
            <svg class="h-8 w-8 text-red-300 dark:text-red-500" 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"/>
            </svg>
            <span class="ml-1 text-lg">2.5K</span>
          </div>
          <div class="flex items-center transform translateZ(8px)">
            <svg class="h-8 w-8 text-green-300 dark:text-green-500" fill="currentColor" viewBox="0 0 24 24">
              <path d="M18 16.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6 16.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM20 8H4V6h16v2zm0 3H4V9h16v2zm0 3H4v-2h16v2z"/>
            </svg>
            <span class="ml-1 text-lg">450</span>
          </div>
        </div>
        <button class="bg-amber-400 hover:bg-amber-500 text-gray-800 font-bold py-3 px-6 rounded-full shadow-lg transform translateZ(8px) hover:scale-105 transition duration-300">
          Share
        </button>
      </div>
    </div>
  </div>
</div>