Componente lettore video
Un semplice componente del lettore video progettato con uno stile 3D e una combinazione di colori pastello, adatto per le dashboard.
Codice HTML
<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md mx-auto">
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<iframe class="w-full h-64" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex flex-col items-start mt-4 w-full">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Video Title</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the video content.</p>
<div class="flex items-center mt-2">
<img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-600 shadow-sm">
<span class="ml-2 text-gray-800 dark:text-gray-100">Uploader Name</span>
</div>
</div>
</div>Componenti correlati
Componente lettore video
Un componente del lettore video reattivo con Tailwind CSS incentrato sulle microinterazioni e sul supporto del tema scuro.
Componente lettore video
Un componente per lettore video in stile retrò/vintage con design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.
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.