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 del lettore video in modalità oscura retrò
Un componente per lettore video reattivo progettato per applicazioni sportive/fitness, dotato di una tavolozza di colori tenui retrò e supporto completo della modalità scura. Include video segnaposto e controlli con una timeline.
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.
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.