Componentes Componentes de medios Componente de componentes de medios
Componente de componentes de medios

Un componente multimedia de interfaz de usuario complejo y en modo oscuro para sitios de documentación/wiki, con un esquema de colores de arco iris degradado. Incluye varios tipos de medios como video, audio e imágenes con información detallada y elementos interactivos, todos responsivos y que utilizan HTML semántico.
Vista previa

Código HTML

<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>
Componentes relacionados

Componente de componentes de medios

Un componente multimedia para el comercio electrónico con microinteracciones, combinación de colores en escala de grises, complejidad moderada, diseño receptivo y compatibilidad con temas oscuros.
Abrir
Componente de medios retro

Un componente multimedia responsivo con un diseño retro/vintage, admite el modo oscuro.
Abrir
Componente de componentes de medios

Un componente multimedia complejo y responsivo para el consumo de contenido de blog, diseñado en modo oscuro con un esquema de color monocromático. Incluye una imagen, título, descripción y avatar del autor.
Abrir