Composant du lecteur vidéo
Un composant de lecteur vidéo simple conçu avec un style 3D et une palette de couleurs pastel, adapté aux tableaux de bord.
HTML Code
<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>Composants associés
Composant de lecteur vidéo rétro
Un composant de lecteur vidéo interactif conçu avec une esthétique rétro/vintage, avec une palette de couleurs en niveaux de gris et plusieurs éléments interactifs adaptés à des fins de commerce électronique, avec prise en charge du mode sombre.
Composant du lecteur vidéo
Composant de lecteur vidéo réactif conçu pour le mode sombre avec une palette de couleurs analogue pour la consommation de contenu.
Composant du lecteur vidéo
Un composant de lecteur vidéo réactif conçu dans un style brutaliste avec prise en charge du thème sombre. Il présente un contraste élevé et une mise en page audacieuse, utilisant Tailwind CSS pour le style et comprend des images et des avatars de remplacement.