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.
Codice HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto overflow-hidden">
<div class="relative">
<img src="https://picsum.photos/500/300" class="w-full h-48 object-cover" alt="Video Thumbnail">
<div class="absolute bottom-0 left-0 right-0 bg-gray-900 bg-opacity-50 p-2 flex items-center justify-between">
<span class="text-white">Video Title</span>
<div class="flex items-center">
<button class="text-white p-1 hover:bg-gray-700 rounded-md transition duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
</button>
<input type="range" class="ml-2 w-24 slider slider-dark dark:bg-gray-700" min="0" max="100" value="50">
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="User Avatar">
<span class="text-gray-800 dark:text-gray-200">User Name</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the video content. It provides insight into what the video is about and engages the user to watch the video.</p>
</div>
</div>Componenti correlati
Lettore video scheumorfico
Componente lettore video scheumorfico con effetti reattivi e supporto per temi scuri.
Lettore video monocromatico 3D
Un componente del lettore video reattivo con elementi di design 3D e combinazione di colori monocromatici, adatto per una dashboard.
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.