Componente lettore video
Un componente del lettore video reattivo progettato con lo stile Neumorphism, utilizzando Tailwind CSS. È dotato di supporto per la modalità oscura con ombre sottili per dare un aspetto morbido all'interfaccia utente.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 max-w-lg w-full">
<div class="flex justify-center mb-4">
<video class="rounded-lg shadow-lg" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-white font-medium">John Doe</p>
<p class="text-gray-500 dark:text-gray-300">Uploaded 2 days ago</p>
</div>
</div>
<div class="mt-4">
<p class="text-gray-800 dark:text-gray-300">A brief description of the video content goes here. It can detail key points or the overall theme of the video.</p>
</div>
</div>
</div>Componenti correlati
Componente 3 del lettore video
Un componente del lettore video reattivo progettato in stile Neumorfismo con supporto per temi scuri utilizzando Tailwind CSS.
VideoPlayer
Componente lettore video con stile Material Design, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente lettore video
Un componente del lettore video reattivo progettato con lo stile glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, supporto per temi scuri e immagini segnaposto.