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.
Codice HTML
<div class="max-w-md mx-auto bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
<video class="w-full h-64" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="p-4">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
<div class="ml-3">
<h2 class="text-white text-lg font-semibold">User Name</h2>
<p class="text-gray-400 dark:text-gray-300 text-sm">2 hours ago</p>
</div>
</div>
<div class="mt-2">
<p class="text-gray-200 dark:text-gray-300 text-sm">Enjoy this video of a beautiful landscape!</p>
</div>
<div class="mt-4 flex justify-between text-gray-400 dark:text-gray-500">
<button class="hover:text-white focus:outline-none">Like</button>
<button class="hover:text-white focus:outline-none">Share</button>
<button class="hover:text-white focus:outline-none">Comment</button>
</div>
</div>
</div>Componenti correlati
Componente lettore video
Componente lettore video con stile Glassmorphism, combinazione di colori analoga e complessità moderata per scopi di blog/contenuti, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS. Nessun Javascript.
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".
Componente Lettore video arcobaleno sfumato
Un componente per il lettore video pulito e minimalista per le dashboard, caratterizzato da una combinazione di colori arcobaleno sfumato, design reattivo e supporto per la modalità scura, che incarna lo stile tipografico svizzero/internazionale.