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
Un componente del lettore video reattivo progettato per un blog o per il consumo di contenuti con microinterazioni e una combinazione di colori pastello. Include la funzionalità di riproduzione/pausa e un controllo del volume. Il design include anche il supporto per la modalità oscura.
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.
Componente lettore video
Un componente del lettore video reattivo progettato per la modalità oscura con una combinazione di colori analoga per il consumo di contenuti.