Componenti Lettore video Componente lettore video

Componente lettore video

Un componente del lettore video reattivo progettato in stile brutalismo con supporto per temi scuri. Presenta un contrasto elevato e un layout audace, utilizza Tailwind CSS per lo stile e include immagini segnaposto e avatar.

Anteprima

Codice HTML

<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
  <h2 class="text-3xl font-bold mb-4">Video Player</h2>
  <div class="relative mb-4">
    <img class="w-full h-auto rounded-lg" src="https://picsum.photos/800/450" alt="Placeholder Video Thumbnail" />
    <div class="absolute inset-0 flex items-center justify-center">
      <button class="bg-red-600 text-white p-3 rounded-full focus:outline-none">
        Play
      </button>
    </div>
  </div>
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
    <div class="ml-3">
      <p class="text-lg font-semibold">User Name</p>
      <p class="text-sm text-gray-400">Uploaded 2 days ago</p>
    </div>
  </div>
  <div class="flex justify-between text-sm text-gray-400">
    <span>1,234 views</span>
    <span>20 likes</span>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-bold">Description</h3>
    <p class="text-gray-300 mt-2">This is a brief description of the video content, designed in a bold, raw style that reflects the principles of brutalism.</p>
  </div>
</div>

Componenti correlati

Componente lettore video

Un componente per lettore video minimalista progettato per le interfacce dei social media, caratterizzato da un layout reattivo con supporto per temi scuri.

Aperto

Lettore video

Componente lettore video con microinterazioni, combinazione di colori complementari, complessità moderata e design reattivo con supporto del tema scuro per l'uso del portfolio.

Aperto

Material_Design_Video_Player_Component

Un componente del lettore video reattivo con estetica Material Design, combinazione di colori neutri caldi, supporto per la modalità scura, adatto per sistemi di prenotazione/prenotazione. Presenta una miniatura del video, un pulsante di riproduzione, un titolo, una descrizione e un invito all'azione "Prenota ora".

Aperto