Componentes de búsqueda

Categorías

Componentes Reproductor de vídeo

Reproductor de vídeo

Interfaz para reproducir contenido de video

Componente de reproductor de video de modo oscuro retro

Un componente de reproductor de video receptivo diseñado para aplicaciones deportivas / fitness, con una paleta de colores retro apagados y soporte completo para el modo oscuro. Incluye vídeo de marcador de posición y controles con una línea de tiempo.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-900 dark:bg-gray-900 text-gray-200 dark:text-gray-200 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gray-800 dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden border border-gray-700 dark:border-gray-700">
    <!-- Video Player Section -->
    <div class="relative pb-[56.25%] h-0 overflow-hidden bg-black flex items-center justify-center">
      <video class="absolute top-0 left-0 w-full h-full object-cover" controls poster="https://picsum.photos/1280/720?random=1">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
      <!-- Play Button Overlay (Optional - if actual video element is used, this is not needed) -->
      <!-- <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
        <button class="p-4 rounded-full bg-orange-600 dark:bg-orange-700 text-white dark:text-gray-100 hover:scale-105 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <svg class="w-8 h-8 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div> -->
    </div>

    <!-- Video Controls & Info Section -->
    <div class="p-4 sm:p-5 md:p-6 flex flex-col space-y-4">
      <!-- Playback Controls -->
      <div class="flex items-center justify-between text-gray-400 dark:text-gray-400">
        <div class="flex items-center space-x-3 sm:space-x-4">
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" 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.75 19.5L8.25 12l7.5-7.5"></path></svg>
          </button>
          <button class="p-2 rounded-full text-amber-500 dark:text-amber-400 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600">
            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
          </button>
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path></svg>
          </button>
        </div>
        <div class="flex items-center space-x-3 sm:space-x-4">
          <span class="text-sm sm:text-base">0:00 / 0:00</span>
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 hidden sm:block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.552 6.823 2 12 2c5.177 0 10.268 3.552 11.542 8-.262.285-.544.545-.845.787A5.94 5.94 0 0112 18c-2.072 0-3.957-.78-5.328-2.075C5.814 14.887 4.19 13.067 2.658 11.413a1.458 1.458 0 010-2.826c1.532-1.654 3.156-3.474 4.872-4.889C8.043 3.78 9.928 3 12 3c1.785 0 3.42.474 4.88 1.282A7.173 7.173 0 0012 17a6.002 6.002 0 01-3.672-1.295A13.918 13.918 0 00.458 10z" clip-rule="evenodd"></path></svg>
          </button>
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" 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 7v10l2 2h12a2 2 0 002-2V9.957a2 2 0 00-.573-1.424L16.435 4.542A2 2 0 0014.957 4H7a2 2 0 00-2 2z"></path></svg>
          </button>
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" 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 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 0h-4m4 0l-5-5"></path></svg>
          </button>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="w-full h-2 bg-gray-700 dark:bg-gray-700 rounded-full overflow-hidden relative cursor-pointer group">
        <div class="h-full bg-amber-600 dark:bg-amber-600 rounded-full" style="width: 30%;"></div>
        <div class="absolute top-1/2 left-[30%] -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-amber-500 dark:bg-amber-500 shadow-md transform scale-0 group-hover:scale-100 transition-transform duration-200"></div>
      </div>

      <!-- Video Title & Description -->
      <div>
        <h3 class="text-xl sm:text-2xl font-bold text-gray-100 dark:text-gray-100 mb-2 leading-tight">
          Retro Game Day Highlights: Championship Match
        </h3>
        <p class="text-gray-300 dark:text-gray-300 text-sm sm:text-base leading-snug">
          Relive the thrilling moments of the championship final. Epic plays, incredible goals, and unforgettable victories from last season's top teams. A must-watch for all fitness enthusiasts!
        </p>
      </div>

      <!-- Action Buttons -->
      <div class="flex flex-wrap gap-3 pt-2">
        <button class="flex-1 sm:flex-none px-4 py-2 bg-amber-600 dark:bg-amber-700 text-white dark:text-gray-100 rounded-md hover:bg-amber-700 dark:hover:bg-amber-800 transition-colors duration-200 text-sm sm:text-base font-semibold focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="hidden sm:inline">Share </span><svg class="inline-block w-4 h-4 mr-1 sm:mr-2 align-middle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.4 3.2m-6.4-6.4l6.4-3.2m2.59-2.59a3 3 0 11-4.242 4.242A3 3 0 0117.842 5.05zM9 12a3 3 0 11-6 0 3 3 0 016 0zm6 6a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        </button>
        <button class="flex-1 sm:flex-none px-4 py-2 bg-gray-700 dark:bg-gray-700 text-gray-200 dark:text-gray-200 rounded-md hover:bg-gray-600 dark:hover:bg-gray-600 transition-colors duration-200 text-sm sm:text-base font-semibold focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="hidden sm:inline">Save </span><svg class="inline-block w-4 h-4 mr-1 sm:mr-2 align-middle" 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="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path></svg>
        </button>
        <button class="flex-1 sm:flex-none px-4 py-2 bg-gray-700 dark:bg-gray-700 text-gray-200 dark:text-gray-200 rounded-md hover:bg-gray-600 dark:hover:bg-gray-600 transition-colors duration-200 text-sm sm:text-base font-semibold focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="hidden sm:inline">More </span><svg class="inline-block w-4 h-4 mr-1 sm:mr-2 align-middle" 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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
        </button>
      </div>

      <!-- Other Videos Section (Conceptual, for context) -->
      <div class="pt-4 border-t border-gray-700 dark:border-gray-700 mt-4">
        <h4 class="text-lg sm:text-xl font-bold text-gray-200 dark:text-gray-200 mb-3">More Highlights</h4>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-center space-x-3 bg-gray-700 dark:bg-gray-700 rounded-lg p-2 hover:bg-gray-600 dark:hover:bg-gray-600 transition-colors duration-200 cursor-pointer">
            <img src="https://picsum.photos/100/60?random=2" alt="Thumbnail" class="w-20 h-12 sm:w-24 sm:h-14 object-cover rounded-md flex-shrink-0">
            <div>
              <p class="text-gray-100 dark:text-gray-100 font-semibold text-sm sm:text-base">Intense Training Session</p>
              <p class="text-gray-400 dark:text-gray-400 text-xs sm:text-sm">5 days ago | 12:34</p>
            </div>
          </div>
          <div class="flex items-center space-x-3 bg-gray-700 dark:bg-gray-700 rounded-lg p-2 hover:bg-gray-600 dark:hover:bg-gray-600 transition-colors duration-200 cursor-pointer">
            <img src="https://picsum.photos/100/60?random=3" alt="Thumbnail" class="w-20 h-12 sm:w-24 sm:h-14 object-cover rounded-md flex-shrink-0">
            <div>
              <p class="text-gray-100 dark:text-gray-100 font-semibold text-sm sm:text-base">Athlete Spotlight: Rise of a Champion</p>
              <p class="text-gray-400 dark:text-gray-400 text-xs sm:text-sm">2 weeks ago | 8:15</p>
            </div>
          </div>
        </div>
      </div>

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

Reproductor de video médico Art Deco

Un componente de reproductor de vídeo sencillo y sensible con una estética de escala de grises Art Deco, diseñado para aplicaciones sanitarias/médicas, incluida la compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 font-serif p-4">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-lg border-2 border-gray-300 dark:border-gray-700 overflow-hidden relative group">
    
    <!-- Top Art Deco Border Element -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-r from-gray-700 via-gray-500 to-gray-700 dark:from-gray-300 dark:via-gray-400 dark:to-gray-300 z-10 opacity-75 group-hover:opacity-100 transition-opacity duration-300">
      <div class="flex h-full">
        <div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform skew-x-12 -ml-2"></div>
        <div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform skew-x-12 -ml-2"></div>
        <div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform skew-x-12 -ml-2"></div>
        <div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform skew-x-12 -ml-2"></div>
      </div>
    </div>

    <div class="p-4 sm:p-6 lg:p-8 pt-8 relative z-20">
      <header class="mb-6 text-center">
        <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2 tracking-wider uppercase">
          <span class="text-gray-600 dark:text-gray-400 mr-1">Medical</span> <span class="text-gray-900 dark:text-white">Procedure Overview</span>
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 italic">Understanding the Key Steps</p>
      </header>

      <div class="relative pb-[56.25%] h-0 mb-6 border border-gray-400 dark:border-gray-600 shadow-inner overflow-hidden">
        <!-- Placeholder for actual video embed, use a static image for visual representation only -->
        <img src="https://picsum.photos/800/450?gravity=center&blur=2" alt="Medical procedure video placeholder" class="absolute inset-0 w-full h-full object-cover filter brightness-75">
        <div class="absolute inset-0 flex items-center justify-center">
          <button class="relative z-10 p-4 rounded-full bg-gray-900 bg-opacity-70 dark:bg-gray-100 dark:bg-opacity-70 text-white dark:text-gray-800 hover:scale-110 transition-transform duration-300 transform motion-safe:ease-out ring-4 ring-gray-600 dark:ring-gray-400">
            <svg class="w-10 h-10 sm:w-12 sm:h-12" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z"/>
            </svg>
            <span class="sr-only">Play Video</span>
          </button>
        </div>
         <!-- Geometric Overlay for Video -->
        <div class="absolute inset-0 z-0 opacity-20 dark:opacity-30">
          <div class="grid grid-cols-4 grid-rows-4 w-full h-full">
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>

            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>

            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>

            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
          </div>
        </div>
      </div>

      <div class="text-center">
        <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
          This video provides a concise overview of the essential steps involved in a common medical procedure. For detailed information, please consult with a healthcare professional.
        </p>
        <p class="text-sm text-gray-500 dark:text-gray-500 mt-2">
          <time datetime="PT2M30S">Duration: 2:30</time>
        </p>
      </div>
    </div>

    <!-- Bottom Art Deco Border Element -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-r from-gray-700 via-gray-500 to-gray-700 dark:from-gray-300 dark:via-gray-400 dark:to-gray-300 z-10 opacity-75 group-hover:opacity-100 transition-opacity duration-300">
     <div class="flex h-full">
        <div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform -skew-x-12 -mr-2"></div>
        <div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform -skew-x-12 -mr-2"></div>
        <div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform -skew-x-12 -mr-2"></div>
        <div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform -skew-x-12 -mr-2"></div>
      </div>
    </div>
  </div>
</div>

Skeuomorphic_Farm_Video_Player

Un componente de reproductor de video skeuomórfico diseñado para sitios web agrícolas y agrícolas, con blanco y negro con un color de acento brillante, diseño receptivo y soporte para modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-xl border-4 border-gray-300 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000">
    <!-- Top Bezel / Screen Area -->
    <div class="relative bg-black rounded-xl overflow-hidden shadow-inner-lg shadow-gray-400/30 dark:shadow-black/50 aspect-video mb-6">
      <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="object-cover w-full h-full" />
      <!-- Play Button Overlay -->
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30">
        <button class="w-24 h-24 rounded-full bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-4 focus:ring-green-400 focus:ring-opacity-75 transition-all duration-300 transform active:scale-95 shadow-lg shadow-green-500/50 flex items-center justify-center group">
          <svg class="w-12 h-12 text-white group-hover:scale-110 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- Controls Area -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Left Controls: Playback & Volume -->
      <div class="flex justify-around items-center bg-gray-300 dark:bg-gray-700 rounded-2xl p-4 shadow-inner shadow-gray-400/40 dark:shadow-black/60">
        <button class="p-3 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a1 1 0 011-1h4a1 1 0 110 2H6v10a1 1 0 11-2 0V4zm10 0a1 1 0 011-1h4a1 1 0 110 2h-3v10a1 1 0 11-2 0V4z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-3 rounded-full bg-green-500 dark:bg-green-600 shadow-md shadow-green-500/40 dark:shadow-green-700/60 hover:bg-green-600 dark:hover:bg-green-700 transition-colors active:scale-95 transform">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-3 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a1 1 0 011-1h4a1 1 0 110 2H6v10a1 1 0 11-2 0V4zm10 0a1 1 0 011-1h4a1 1 0 110 2h-3v10a1 1 0 11-2 0V4z" clip-rule="evenodd"></path></svg>
        </button>
      </div>

      <!-- Right Controls: Progress Bar & More Options -->
      <div class="flex flex-col justify-between bg-gray-300 dark:bg-gray-700 rounded-2xl p-4 shadow-inner shadow-gray-400/40 dark:shadow-black/60">
        <div class="relative w-full h-4 bg-gray-400 dark:bg-gray-600 rounded-full mb-4 shadow-inset-sm shadow-gray-500/30 dark:shadow-black/40">
          <div class="absolute h-full w-3/4 bg-green-500 rounded-full shadow-md shadow-green-500/50 dark:shadow-green-700/60"></div>
          <div class="absolute h-6 w-6 -right-1 top-1/2 -translate-y-1/2 bg-white dark:bg-gray-200 rounded-full border-2 border-green-500 dark:border-green-600 shadow-lg shadow-black/30 dark:shadow-black/50 cursor-pointer"></div>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-300 text-sm font-semibold mr-2">0:45 / 2:30</span>
          <button class="p-2 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
            <svg class="w-5 h-5 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 00-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM17 4a1 1 0 00-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4z"></path></svg>
          </button>
          <button class="p-2 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
            <svg class="w-5 h-5 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.546 15.58a.75.75 0 01.442.263l6.5-6.5a.75.75 0 011.06 1.06l-6.208 6.207a2.25 2.25 0 01-3.182 0l-4.25-4.25a.75.75 0 011.06-1.06l4.25 4.25a.75.75 0 001.06 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.5 10.5a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H5.25a.75.75 0 01-.75-.75z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom shadow utilities for skeuomorphism */
  .shadow-inner-lg {
    box-shadow: inset 0 6px 12px -2px rgba(0, 0, 0, 0.4), inset 0 -6px 12px -2px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 0 6px 12px -2px rgba(0, 0, 0, 0.6), inset 0 -6px 12px -2px rgba(255, 255, 255, 0.05), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .shadow-inset-sm {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 -1px 2px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-inset-sm {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 -1px 2px rgba(255, 255, 255, 0.05);
  }
  /* Perspective for a slight 3D tilt */
  .perspective-1000 {
    transform: rotateX(2deg) rotateY(0deg);
  }
  @media (max-width: 639px) {
    .perspective-1000 {
      transform: none; /* Disable perspective on small screens */
    }
  }
</style>

Componente de reproductor de vídeo inmobiliario

Un componente de reproductor de video complejo y receptivo para plataformas inmobiliarias, con una estética de Material Design con una paleta de colores bosque/verde. Incluye control de video, detalles de propiedades y una lista de reproducción, con soporte completo para el modo oscuro.

Abrir Vista previa

                <div class="font-sans antialiased text-gray-900 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl max-w-7xl mx-auto my-8">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
    <!-- Main Video Player Section -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden relative pb-9/16 aspect-video">
      <iframe class="absolute top-0 left-0 w-full h-full rounded-lg" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&controls=1&modestbranding=1&rel=0" title="Property Showcase Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

      <!-- Overlay for play/pause/volume (simplified as this is complex for pure HTML/CSS) -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 rounded-lg">
        <div class="flex justify-between items-center w-full text-white">
          <div class="flex items-center space-x-4">
            <button class="p-3 rounded-full bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 transition duration-300">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z" />
              </svg>
            </button>
            <span class="text-sm hidden sm:block">0:45 / 3:20</span>
          </div>
          <div class="flex items-center space-x-4">
            <button class="p-2 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition duration-300">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M18 10v6c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1zm-4 0v6c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1zm-4 0v6c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1zm-4 0v6c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1z"/>
              </svg>
            </button>
            <button class="p-2 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition duration-300">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 4.5c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm-2 12.5H8V7h2v10zm4 0h-2V7h2v10zm4 0h-2V7h2v10z" />
              </svg>
            </button>
            <button class="p-2 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition duration-300">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 3C6.48 3 2 7.48 2 13s4.48 10 10 10 10-4.48 10-10S17.52 3 12 3zm-1 15H9v-8h2v8zm4 0h-2v-8h2v8zm-2-10h-2V3h2v5z" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Property Details & Playlist Section -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col">
      <!-- Property Details -->
      <div class="mb-6 pb-6 border-b border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100">Luxurious Forest-View Retreat</h2>
        <p class="text-emerald-700 dark:text-emerald-400 text-sm font-semibold mb-3">$1,250,000</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">123 Evergreen Lane, Pine Ridge, CA 90210</p>
        <div class="flex items-center space-x-4 text-gray-600 dark:text-gray-400 text-sm ">
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3.5L5 9v11h14V9l-7-5.5zm0 2.31l5 4V19h-5v-6h-2v6H7V10.81l5-4z"/></svg>
            4 Beds
          </span>
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3.5c-2.49 0-4.5 2.01-4.5 4.5 0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5c0-2.49-2.01-4.5-4.5-4.5zM12 2c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 14c-4.42 0-8 3.58-8 8h16c0-4.42-3.58-8-8-8z"/></svg>
            3 Baths
          </span>
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 24 24"><path d="M16 13l-4 4-4-4V7h8v6z"/></svg>
            2,800 sqft
          </span>
        </div>
      </div>

      <!-- Agent Information (Optional, but good for real estate) -->
      <div class="flex items-center mb-6">
        <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Agent Name" class="w-12 h-12 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-400 mr-4 shadow-sm">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Senior Real Estate Agent</p>
        </div>
        <button class="ml-auto bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-2 px-4 rounded-full text-sm shadow-md focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300">
          Contact
        </button>
      </div>

      <!-- Video Playlist -->
      <div class="flex-grow overflow-y-auto custom-scrollbar pr-2">
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">More Videos</h3>
        <div class="space-y-4">

          <!-- Playlist Item 1 -->
          <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-transparent hover:border-emerald-500 dark:hover:border-emerald-400 cursor-pointer">
            <img src="https://picsum.photos/120/80?random=1" alt="Video Thumbnail" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 border border-gray-200 dark:border-gray-600">
            <div class="flex-grow">
              <p class="font-medium text-gray-800 dark:text-gray-200 line-clamp-2">Interactive 3D Floor Plan Tour</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">2:15 min</p>
            </div>
            <button class="ml-4 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </button>
          </div>

          <!-- Playlist Item 2 (Currently Playing) -->
          <div class="flex items-center p-3 bg-emerald-50 dark:bg-emerald-900 rounded-lg shadow-md border border-emerald-500 dark:border-emerald-400 relative overflow-hidden">
            <span class="absolute top-0 right-0 bg-emerald-500 dark:bg-emerald-400 text-white text-xs px-2 py-1 rounded-bl-lg font-semibold">Playing</span>
            <img src="https://picsum.photos/120/80?random=2" alt="Video Thumbnail" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 border border-emerald-400 dark:border-emerald-300">
            <div class="flex-grow">
              <p class="font-semibold text-emerald-800 dark:text-emerald-100 line-clamp-2">Full Property Walkthrough (Current)</p>
              <p class="text-xs text-emerald-600 dark:text-emerald-300">3:20 min</p>
            </div>
            <button class="ml-4 p-2 rounded-full text-emerald-700 dark:text-emerald-200 bg-emerald-100 dark:bg-emerald-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-600 focus:ring-opacity-50">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
            </button>
          </div>

          <!-- Playlist Item 3 -->
          <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-transparent hover:border-emerald-500 dark:hover:border-emerald-400 cursor-pointer">
            <img src="https://picsum.photos/120/80?random=3" alt="Video Thumbnail" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 border border-gray-200 dark:border-gray-600">
            <div class="flex-grow">
              <p class="font-medium text-gray-800 dark:text-gray-200 line-clamp-2">Aerial Drone Footage of Estate</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">1:50 min</p>
            </div>
            <button class="ml-4 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </button>
          </div>

          <!-- Playlist Item 4 -->
          <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-transparent hover:border-emerald-500 dark:hover:border-emerald-400 cursor-pointer">
            <img src="https://picsum.photos/120/80?random=4" alt="Video Thumbnail" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 border border-gray-200 dark:border-gray-600">
            <div class="flex-grow">
              <p class="font-medium text-gray-800 dark:text-gray-200 line-clamp-2">Neighborhood & Community Highlights</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">4:00 min</p>
            </div>
            <button class="ml-4 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </button>
          </div>

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

  <!-- Custom Scrollbar Styles (Pure CSS approximation, requires more robust JS for full functionality) -->
  <style>
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #f0fdf4; /* light emerald/green tone */
      border-radius: 10px;
    }
    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: #374151; /* gray-700 */
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: #059669; /* emerald-600 */
      border-radius: 10px;
      border: 2px solid #f0fdf4;
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: #34d399; /* emerald-400 */
      border: 2px solid #374151;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background-color: #047857; /* emerald-700 */
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background-color: #10b981; /* emerald-500 */
    }

    /* Aspect ratio for video player */
    .pb-9\/16 {
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
    }
  </style>
</div>

Componente de reproductor de vídeo

Un componente de reproductor de vídeo complejo y de alto contraste con estética de Material Design, adecuado para sitios web de viajes y turismo. Cuenta con diseño responsivo, soporte para modo oscuro y elementos interactivos.

Abrir Vista previa

                <div class="p-4 md:p-8 lg: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 overflow-hidden rounded-2xl shadow-2xl dark:shadow-none transition-all duration-300 transform bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:shadow-3xl dark:hover:shadow-none">
    <div class="md:flex">
      <!-- Video Player Section -->
      <div class="flex-1 relative aspect-video bg-black rounded-t-2xl md:rounded-tr-none md:rounded-l-2xl overflow-hidden">
        <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover opacity-70 group-hover:opacity-100 transition-opacity duration-300">
        <div class="absolute inset-0 flex items-center justify-center">
          <button class="p-4 rounded-full bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-30 backdrop-blur-sm text-white hover:scale-110 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-blue-600 focus:ring-opacity-50">
            <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5v14l11-7z"/>
            </svg>
          </button>
        </div>

        <!-- Controls Overlay Placeholder -->
        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent opacity-90 text-white flex flex-col space-y-2">
          <div class="flex items-center space-x-2">
            <button class="text-white hover:text-blue-400 focus:outline-none">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 5v14l11-7z"/>
              </svg>
            </button>
            <div class="flex-1 h-2 bg-gray-700 rounded-full">
              <div class="h-full w-2/3 bg-blue-500 rounded-full"></div>
            </div>
            <span class="text-sm text-gray-300">0:45 / 2:30</span>
            <button class="text-white hover:text-blue-400 focus:outline-none">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
            <button class="text-white hover:text-blue-400 focus:outline-none hidden sm:block">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4v16m8-8H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Details and Sidebar Section -->
      <div class="w-full md:w-2/5 p-6 md:p-8 flex flex-col justify-between">
        <div>
          <h2 class="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white mb-3 leading-tight">
            Exploring the Hidden Gems of Patagonia
          </h2>
          <p class="text-sm text-blue-600 dark:text-blue-400 font-medium mb-4 uppercase tracking-wider">
            Travel Documentary • Adventure
          </p>
          <p class="text-gray-700 dark:text-gray-300 text-base mb-6 leading-relaxed">
            Join us on an unforgettable journey through the breathtaking landscapes of Patagonia. Discover majestic glaciers, pristine lakes, and towering peaks in this stunning adventure.
          </p>
          
          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Key Highlights:</h3>
            <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1">
              <li>Perito Moreno Glacier's stunning ice formations</li>
              <li>Trekking through Torres del Paine National Park</li>
              <li>Wildlife spotting: guanacos, condors, and pumas</li>
              <li>Kayaking in turquoise glacial waters</li>
            </ul>
          </div>
        </div>

        <div class="pt-4 border-t border-gray-200 dark:border-gray-700 mt-auto">
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Traveller User" class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 shadow-md">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white">Filmed by: John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Adventure Vlogger</p>
            </div>
          </div>
          <a href="#" class="inline-block w-full py-3 px-6 rounded-lg text-center font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 shadow-lg">
            Book Your Patagonia Tour Now
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Brutalist_RealEstate_VideoPlayer

Un componente complejo de reproducción de video de estilo brutalista para listados de bienes raíces, con alto contraste, una paleta de colores bosque / verde y diseño receptivo con soporte para modo oscuro. Incluye detalles de la propiedad, información del agente y botones de acción.

Abrir Vista previa

                <div class="font-mono min-h-screen bg-emerald-100 text-emerald-900 dark:bg-emerald-950 dark:text-emerald-100 p-4 sm:p-8 flex items-center justify-center">
  <div class="w-full max-w-6xl border-4 border-emerald-900 dark:border-emerald-100 grid grid-cols-1 lg:grid-cols-3 gap-0 bg-emerald-50 dark:bg-emerald-900 shadow-[8px_8px_0px_0px_rgba(4,72,55,1)] dark:shadow-[8px_8px_0px_0px_rgba(204,251,235,1)]">

    <!-- Left Column: Video Player & Controls -->
    <div class="col-span-1 lg:col-span-2 border-b-4 lg:border-r-4 lg:border-b-0 border-emerald-900 dark:border-emerald-100 flex flex-col">
      <div class="relative w-full aspect-video bg-black group overflow-hidden">
        <img src="https://picsum.photos/1280/720?random=1" alt="Property Video Thumbnail" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105 opacity-80">
        <div class="absolute inset-0 bg-black/60 flex items-center justify-center opacity-100 group-hover:opacity-75 transition-opacity duration-300">
          <svg class="h-24 w-24 sm:h-32 sm:w-32 text-emerald-300 dark:text-emerald-700 border-4 border-emerald-300 dark:border-emerald-700 p-2 cursor-pointer transition-colors duration-300 hover:text-emerald-100 hover:bg-emerald-700 dark:hover:text-emerald-900 dark:hover:bg-emerald-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.29 14.71L14.71 12 7.29 9.29V14.71zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent text-emerald-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <div class="flex items-center justify-between pointer-events-none">
            <div class="w-full h-2 bg-emerald-700 dark:bg-emerald-300 relative overflow-hidden">
              <div class="absolute top-0 left-0 bg-emerald-300 dark:bg-emerald-700 h-full w-2/5"></div>
            </div>
          </div>
          <div class="flex justify-between items-center mt-2 text-sm">
            <span>2:35 / 5:10</span>
            <div class="flex gap-2">
                <button class="flex items-center gap-1 text-emerald-100 border-2 border-emerald-100 px-2 py-1 hover:bg-emerald-700 hover:border-emerald-700 transition-colors duration-200">
                    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"/></svg>
                </button>
                <button class="flex items-center gap-1 text-emerald-100 border-2 border-emerald-100 px-2 py-1 hover:bg-emerald-700 hover:border-emerald-700 transition-colors duration-200">
                    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                </button>
            </div>
          </div>
        </div>
      </div>
      <div class="p-4 sm:p-6 space-y-4 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl sm:text-3xl font-extrabold leading-tight tracking-tighter uppercase mb-2 border-b-2 border-emerald-900 dark:border-emerald-100 pb-1">
            Modern Forest Residence
          </h2>
          <p class="text-xl sm:text-2xl font-bold mb-4 flex items-baseline gap-2">
            $1,250,000 <span class="text-lg text-emerald-700 dark:text-emerald-300 font-normal ml-2">• 3 beds • 4 baths • 2,800 sqft</span>
          </p>
          <p class="text-emerald-700 dark:text-emerald-300 mb-4 text-sm sm:text-base">
            123 Evergreen Lane, Forest Hills, CA 90210
          </p>
          <div class="grid grid-cols-2 lg:grid-cols-4 gap-2 text-xs sm:text-sm pt-2 border-t-2 border-emerald-200 dark:border-emerald-700">
              <div class="flex items-center space-x-1">
                  <svg class="h-4 w-4 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
                  <span>Built 2022</span>
              </div>
              <div class="flex items-center space-x-1">
                  <svg class="h-4 w-4 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
                  <span>Forest Views</span>
              </div>
              <div class="flex items-center space-x-1">
                  <svg class="h-4 w-4 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 002-2V4H4zm10 2a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h10zm-3 8l3-3m0 0l-3-3m3 3H2v2h12v-2zm-3-4l3-3m0 0l-3-3m3 3H2v2h12v-2z" clip-rule="evenodd"></path></svg>
                  <span>Large Lot</span>
              </div>
          </div>
        </div>

        <div class="flex flex-col sm:flex-row gap-4 mt-6">
          <button class="flex-1 bg-emerald-900 text-emerald-100 py-3 sm:py-4 px-6 uppercase text-base sm:text-lg font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 hover:border-emerald-700 dark:hover:bg-emerald-300 dark:hover:text-emerald-900 transition-colors duration-200 shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
            Schedule Tour
          </button>
          <button class="flex-1 bg-transparent text-emerald-900 dark:text-emerald-100 py-3 sm:py-4 px-6 uppercase text-base sm:text-lg font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 hover:text-emerald-100 dark:hover:bg-emerald-300 dark:hover:text-emerald-900 transition-colors duration-200 shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
            Download Info Pack
          </button>
        </div>
      </div>
    </div>

    <!-- Right Column: Agent & Related Properties -->
    <div class="col-span-1 border-emerald-900 dark:border-emerald-100 flex flex-col pt-4 sm:pt-6">
      <div class="px-4 sm:px-6 mb-6 flex-shrink-0">
        <h3 class="text-lg sm:text-xl font-bold uppercase mb-4 border-b-2 border-emerald-900 dark:border-emerald-100 pb-1">
          Listing Agent
        </h3>
        <div class="flex items-center gap-4">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Agent Emily Green" class="w-20 h-20 sm:w-24 sm:h-24 object-cover border-4 border-emerald-900 dark:border-emerald-100 rounded-full shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
          <div>
            <p class="text-lg sm:text-xl font-bold uppercase leading-snug">Emily Green</p>
            <p class="text-sm text-emerald-700 dark:text-emerald-300">Verdant Realty Group</p>
            <a href="tel:+15551234567" class="text-sm text-emerald-700 dark:text-emerald-300 hover:underline flex items-center mt-1">
              <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.774a11.037 11.037 0 006.103 6.103l.774-1.548a1 1 0 011.06-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" clip-rule="evenodd"></path></svg>
              +1 (555) 123-4567
            </a>
          </div>
        </div>
        <button class="w-full mt-4 bg-emerald-700 text-emerald-100 py-2.5 sm:py-3 px-4 uppercase text-sm sm:text-base font-bold border-2 border-emerald-700 dark:border-emerald-100 hover:bg-emerald-900 transition-colors duration-200 shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
          Contact Emily
        </button>
      </div>

      <div class="flex-grow border-t-4 border-emerald-900 dark:border-emerald-100 pb-4 sm:pb-6 px-4 sm:px-6 overflow-hidden flex flex-col">
        <h3 class="text-lg sm:text-xl font-bold uppercase mt-4 mb-4 border-b-2 border-emerald-900 dark:border-emerald-100 pb-1">
          Explore Similar Listings
        </h3>
        <div class="space-y-4 overflow-y-auto custom-scrollbar pr-2">
          <!-- Related Property 1 -->
          <div class="bg-emerald-100 dark:bg-emerald-800 p-3 border-2 border-emerald-900 dark:border-emerald-100 group shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
            <img src="https://picsum.photos/300/200?random=2" alt="Related property thumbnail" class="w-full h-32 object-cover mb-2 border-2 border-emerald-900 dark:border-emerald-100 group-hover:scale-105 transition-transform duration-200">
            <p class="font-bold text-sm sm:text-base uppercase leading-tight">Lakeside Retreat</p>
            <p class="text-emerald-700 dark:text-emerald-300 text-xs sm:text-sm mb-1">$980,000 • 3 beds</p>
            <button class="block w-full bg-emerald-900 text-emerald-100 text-xs sm:text-sm px-3 py-1.5 uppercase font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 transition-colors duration-200">
              View Details
            </button>
          </div>
          <!-- Related Property 2 -->
          <div class="bg-emerald-100 dark:bg-emerald-800 p-3 border-2 border-emerald-900 dark:border-emerald-100 group shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
            <img src="https://picsum.photos/300/200?random=3" alt="Related property thumbnail" class="w-full h-32 object-cover mb-2 border-2 border-emerald-900 dark:border-emerald-100 group-hover:scale-105 transition-transform duration-200">
            <p class="font-bold text-sm sm:text-base uppercase leading-tight">Mountain View Chalet</p>
            <p class="text-emerald-700 dark:text-emerald-300 text-xs sm:text-sm mb-1">$1,500,000 • 4 beds</p>
            <button class="block w-full bg-emerald-900 text-emerald-100 text-xs sm:text-sm px-3 py-1.5 uppercase font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 transition-colors duration-200">
              View Details
            </button>
          </div>
          <!-- Related Property 3 -->
          <div class="bg-emerald-100 dark:bg-emerald-800 p-3 border-2 border-emerald-900 dark:border-emerald-100 group shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
            <img src="https://picsum.photos/300/200?random=4" alt="Related property thumbnail" class="w-full h-32 object-cover mb-2 border-2 border-emerald-900 dark:border-emerald-100 group-hover:scale-105 transition-transform duration-200">
            <p class="font-bold text-sm sm:text-base uppercase leading-tight">Urban Eco Loft</p>
            <p class="text-emerald-700 dark:text-emerald-300 text-xs sm:text-sm mb-1">$850,000 • 2 beds</p>
            <button class="block w-full bg-emerald-900 text-emerald-100 text-xs sm:text-sm px-3 py-1.5 uppercase font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
/* Custom Scrollbar for brutalism style */
.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #d1fae5; /* emerald-100 */
  border: 2px solid #044837; /* emerald-900 */
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: #062f27; /* emerald-950 */
  border: 2px solid #ccfbeB; /* emerald-100 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #044837; /* emerald-900 */
  border: 2px solid #d1fae5; /* emerald-100 */
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #ccfbeB; /* emerald-100 */
  border: 2px solid #044837; /* emerald-900 */
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #044837 #d1fae5; /* thumb color track color */
}

.dark .custom-scrollbar {
  scrollbar-color: #ccfbeB #062f27; /* thumb color track color */
}
</style>

Material_Design_Video_Player_Component

Un componente de reproductor de video receptivo con estética de Material Design, combinación de colores cálidos y neutros, compatibilidad con modo oscuro, adecuado para sistemas de reserva / reserva. Cuenta con una miniatura de video, un botón de reproducción, un título, una descripción y una llamada a la acción "Reservar ahora".

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl relative">
    <!-- Video Thumbnail & Play Button -->
    <div class="relative pb-9/16 overflow-hidden group">
      <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-100 group-hover:opacity-100 transition-opacity duration-300">
        <button class="p-4 md:p-6 bg-amber-500 text-white rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50" aria-label="Play Video">
          <svg class="h-8 w-8 md:h-10 md:w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Content Area -->
    <div class="p-4 sm:p-6 md:p-8">
      <h3 class="text-2xl sm:text-3xl font-semibold text-gray-800 dark:text-gray-100 mb-3 leading-tight">
        Exclusive Tour: Discover Our Premier Service
      </h3>
      <p class="text-gray-600 dark:text-gray-300 text-base sm:text-lg mb-5 leading-relaxed">
        Watch this short video to get a comprehensive understanding of our top-tier service, designed to cater to your specific needs. Learn about our process, benefits, and how we ensure a seamless experience from start to finish.
      </p>

      <!-- Details Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-6">
        <div>
          <div class="flex items-center text-gray-700 dark:text-gray-200 mb-2">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 10.586V6z" clip-rule="evenodd"></path></svg>
            <span class="font-medium">Duration:</span> 4 min 30 sec
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-200">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2v-2a2 2 0 00-2-2H4a2 2 0 00-2 2V6z"></path><path fill-rule="evenodd" d="M4 4h12a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm4.586 7.414a2 2 0 10-2.828 2.828L10 17.828l4.243-4.242a2 2 0 10-2.828-2.828L10 12.172l-1.414-1.414z" clip-rule="evenodd"></path></svg>
            <span class="font-medium">Format:</span> HD 1080p
          </div>
        </div>
        <div>
          <div class="flex items-center text-gray-700 dark:text-gray-200 mb-2">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM1 18h18V8H1v10z"></path></svg>
            <span class="font-medium">Presenter:</span> Alex Johnson
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-200">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            <span class="font-medium">Relevant for:</span> All Clients
          </div>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700 mt-4">
        <button class="px-6 py-3 bg-amber-600 text-white font-semibold rounded-md shadow-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-300 transform hover:-translate-y-0.5" aria-label="Book a Reservation">
          Book Your Reservation Now
        </button>
      </div>
    </div>
  </div>
</div>

Componente de reproductor de video - Acuarela/Artístico, Océano/Azul, Cuidado de la salud

Un componente de reproductor de video simple y receptivo con un estilo de diseño artístico / acuarela y un esquema de color océano / azul, adecuado para aplicaciones médicas y de atención médica. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="relative bg-gradient-to-br from-blue-50 to-blue-200 dark:from-blue-950 dark:to-blue-800 p-4 sm:p-6 md:p-8 rounded-xl shadow-xl overflow-hidden group">
  <!-- Watercolor overlay effect -->
  <div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply dark:mix-blend-screen" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'watercolorEffect\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.02 0.05\' numOctaves=\'2\' result=\'noise\'/><feDiffuseLighting in=\'noise\' lightingColor=\'#ADD8E6\' surfaceScale=\'3\' result=\'light\'/><feBlend in=\'SourceGraphic\' in2=\'light\' mode=\'multiply\'/></filter></defs><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'url(%23gradient)\'/><radialGradient id=\'gradient\' cx=\'50%\' cy=\'50%\' r=\'50%\' fx=\'50%\' fy=\'50%\'><stop offset=\'0%\' stop-color=\'rgb(173,216,230)\'/><stop offset=\'100%\' stop-color=\'rgb(135,206,235)\'/></radialGradient><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' filter=\'url(%23watercolorEffect)\' opacity=\'0.5\'/></svg>'); background-size: cover;"></div>

  <div class="relative z-10 flex flex-col lg:flex-row items-center lg:items-start space-y-6 lg:space-y-0 lg:space-x-8">

    <!-- Video Player Area -->
    <div class="w-full lg:w-2/3 aspect-video bg-blue-300 dark:bg-blue-900 rounded-lg shadow-inner-lg overflow-hidden border border-blue-400 dark:border-blue-700 group-hover:scale-[1.01] transition-transform duration-300 ease-out">
      <iframe
        class="w-full h-full"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&controls=1&showinfo=0&rel=0&modestbranding=1"
        title="Medical Procedure Video"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
      ></iframe>
    </div>

    <!-- Video Info / Description -->
    <div class="w-full lg:w-1/3 flex flex-col space-y-4 text-center lg:text-left">
      <h3 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-100 leading-tight tracking-tight drop-shadow-sm font-serif">
        <span class="block">Understanding</span>
        <span class="block">Respiratory Health</span>
      </h3>
      <p class="text-blue-700 dark:text-blue-200 text-base sm:text-lg leading-relaxed font-light">
        This insightful video provides a comprehensive overview of common respiratory conditions and preventative measures. Essential viewing for patients and caregivers.
      </p>
      <div class="flex justify-center lg:justify-start items-center space-x-3 pt-2">
        <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Dr. Alex Chen" class="w-10 h-10 rounded-full border-2 border-blue-500 dark:border-blue-400 shadow-md">
        <span class="text-blue-600 dark:text-blue-300 text-sm font-medium">Dr. Alex Chen, MD</span>
      </div>
      <div class="flex justify-center lg:justify-start pt-4">
        <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white 
              bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-600 hover:to-blue-700 
              dark:from-sky-700 dark:to-blue-800 dark:hover:from-sky-800 dark:hover:to-blue-900
              focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-blue-950 transform hover:scale-105 transition-all duration-200 ease-in-out group">
          <svg class="-ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm8-7a1 1 0 00-.707-.293L4.293 8.293a1 1 0 000 1.414l5 5a1 1 0 001.414 0l5-5a1 1 0 000-1.414L10.707 2.707A1 1 0 0010 3z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M10 8V5a1 1 0 00-1-1H7a1 1 0 000 2h1v3a1 1 0 00-1 1H7a1 1 0 000 2h1v3a1 1 0 001 1h2a1 1 0 001-1v-3h1a1 1 0 000-2h-1V9h1a1 1 0 000-2h-1V5h1a1 1 0 000-2h-1z" clip-rule="evenodd" />
            <path d="M8.707 13.293a1 1 0 00-1.414 0L4.293 15.586a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L6.414 16H13a1 1 0 000-2H6.414l2.293-2.293a1 1 0 000-1.414z" />
          </svg>
          Watch Now
        </button>
      </div>
    </div>
  </div>

  <!-- Subtle brush stroke footer -->
  <div class="absolute bottom-0 left-0 right-0 h-6 bg-blue-300 dark:bg-blue-800 opacity-60 rounded-b-xl" style="mask-image: url('data:image/svg;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMjAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3My5vcmcvMjAwMC9zdmciPjxlbGxpcHNlIGN4PSIxMDQuNzcxIiBjeT0iMS41MDc2MSIgcnk9IjQ5LjUwNzYxIiByeD0iMTU5Ljc3MSIgc2tldyYobGRxdW87eClyZWNlbnQ9IjAuNjY5MTgzIiByb3RhdGU9Ii02LjM1MjY1IiBmaWxsPSIjRjk2RkYwIi8+PC9zdmc+'); mask-size: cover; mask-repeat: no-repeat; mask-position: bottom;"></div>
</div>

Componente de reproductor de vídeo

Un componente de reproductor de video receptivo diseñado con una estética inspirada en el papel / impresión y una combinación de colores complementaria, adecuada para plataformas de foros o comunidades. Incluye soporte para modo oscuro y HTML semántico.

Abrir Vista previa

                <div class="font-sans antialiased bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-850 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 relative">
    <!-- Faux paper texture / watermark -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/notebook-dark.png')] opacity-10 dark:opacity-5 pointer-events-none z-0"></div>

    <div class="relative z-10 p-4 sm:p-6 lg:p-8">
      <!-- Header -->
      <div class="flex justify-between items-start mb-6 border-b pb-4 border-amber-200 dark:border-violet-600">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-amber-700 dark:text-amber-300 leading-tight">Community Highlight: 'The Future of AI'</h2>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-1">Dive into cutting-edge discussions.</p>
        </div>
        <div class="flex-shrink-0">
          <a href="#" class="text-violet-600 dark:text-violet-400 hover:underline text-sm sm:text-base">View Thread</a>
        </div>
      </div>

      <!-- Video Player Area -->
      <div class="relative w-full aspect-video bg-black rounded-lg overflow-hidden shadow-md mb-6 border border-gray-300 dark:border-gray-700">
        <img src="https://picsum.photos/800/450?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">
          <button class="p-4 sm:p-5 rounded-full bg-amber-500 text-white shadow-xl hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:bg-violet-700 dark:hover:bg-violet-800 dark:focus:ring-violet-500 transition-all duration-300 ease-in-out transform hover:scale-105">
            <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5v14l11-7z"></path>
            </svg>
            <span class="sr-only">Play Video</span>
          </button>
        </div>
      </div>

      <!-- Video Details and Actions -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div class="md:col-span-2">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-700 dark:text-amber-300 leading-snug mb-2">Unlocking the Potential of Generative AI</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
            Join leading experts as they explore the groundbreaking advancements and ethical considerations of generative artificial intelligence.
            This session delves into practical applications and future implications.
          </p>
        </div>
        <div class="md:col-span-1 flex flex-col items-start md:items-end">
          <div class="flex items-center text-sm mb-2 text-gray-600 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
            <span>Posted: <time datetime="2023-10-26">Oct 26, 2023</time></span>
          </div>
          <div class="flex items-center text-sm mb-4 text-gray-600 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-violet-600 dark:text-violet-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 4v-4H4a2 2 0 01-2-2V5zm10 4a1 1 0 100-2 1 1 0 000 2zm-1-4a1 1 0 100-2 1 1 0 000 2zm-5 0a1 1 0 100-2 1 1 0 000 2z"></path></svg>
            <span>Views: 1.2K</span>
          </div>
          <div class="flex space-x-2">
            <button class="flex items-center px-3 py-2 rounded-full text-white bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-800 text-sm transition-colors duration-200">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 01-2 2H4a2 2 0 01-2-2V8c0-1.1.9-2 2-2h4l2-2h6a2 2 0 012 2v3zM7 6a1 1 0 01-2 0V4a1 1 0 012 0h2a1 1 0 010 2H7z"></path></svg>
              Share
            </button>
            <button class="flex items-center px-3 py-2 rounded-full text-violet-700 bg-violet-100 hover:bg-violet-200 dark:bg-violet-900 dark:text-violet-300 dark:hover:bg-violet-800 text-sm transition-colors duration-200">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 11-3 0v-6zM6 10.333v5.5H18V4.467a2 2 0 00-2-2H8a2 2 0 00-2 2v5.866zM10 6a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1zm0 4a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1zm-4 4a1 1 0 011-1h2a1 1 0 110 2H7a1 1 0 01-1-1z"></path></svg>
              Add to Watchlist
            </button>
          </div>
        </div>
      </div>

      <!-- Uploader Info -->
      <div class="flex items-center p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-700">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full mr-4 object-cover border-2 border-amber-400 dark:border-violet-500" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Uploader Avatar">
        <div>
          <p class="font-medium text-amber-800 dark:text-amber-200">Uploaded by: <a href="#" class="hover:underline text-amber-700 dark:text-amber-300">TechExplorer</a></p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Senior Member, AI Innovations Forum</p>
        </div>
      </div>
    </div>
  </div>
</div>

Componente del reproductor de vídeo Gradient Rainbow

Un componente de reproductor de video limpio y minimalista para tableros, con un esquema de colores de arco iris degradado, diseño receptivo y compatibilidad con modo oscuro, que encarna el estilo de tipografía suiza / internacional.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans flex items-center justify-center">
  <div class="w-full max-w-4xl rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out
              bg-gradient-to-br from-purple-400 via-pink-500 to-red-500
              dark:from-purple-800 dark:via-pink-900 dark:to-red-900
              p-1 sm:p-1.5 md:p-2">
    <div class="bg-white dark:bg-gray-800 rounded-md flex flex-col md:flex-row relative z-10 p-4 sm:p-6 lg:p-8">

      <!-- Video Player Section -->
      <div class="w-full md:w-3/5 lg:w-2/3 flex-shrink-0 mb-6 md:mb-0 md:mr-6 lg:mr-8 relative aspect-video overflow-hidden rounded-md group">
        <video class="w-full h-full object-cover rounded-md" poster="https://picsum.photos/seed/video-thumb/800/450">
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
        <!-- Play Button Overlay -->
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 rounded-md opacity-100 group-hover:opacity-0 transition-opacity duration-300 ease-in-out cursor-pointer">
          <svg class="w-16 h-16 sm:w-20 sm:h-20 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <!-- Video Info & Controls Section -->
      <div class="flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 leading-tight">
            Dashboard Data Visualization Overview
          </h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 sm:mb-6">
            A concise walkthrough of our latest dashboard features and key data insights.
          </p>

          <div class="flex items-center text-sm mb-4">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Presenter avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
              <p class="text-gray-500 dark:text-gray-400">Analytics Lead</p>
            </div>
          </div>

          <div class="text-xs text-gray-500 dark:text-gray-400 mb-4">
            <p>Published: 3 days ago</p>
            <p>Views: 1.2M</p>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="mt-auto 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 rounded-lg text-sm font-semibold
                         bg-gradient-to-r from-blue-500 to-teal-500 text-white dark:text-gray-100
                         hover:from-blue-600 hover:to-teal-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
                         shadow-md hover:shadow-lg transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
            <svg class="inline-block w-4 h-4 mr-2 -mt-0.5" 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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
            </svg>
            Download Report
          </button>
          <button class="flex-1 py-3 px-6 rounded-lg text-sm font-semibold
                         bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200
                         hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                         shadow-md hover:shadow-lg transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
            <svg class="inline-block w-4 h-4 mr-2 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
            </svg>
            Leave Feedback
          </button>
        </div>
      </div>

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