Lecteur vidéo
Composant de lecteur vidéo avec micro-interactions, palette de couleurs complémentaires, complexité modérée et conception réactive avec prise en charge du thème sombre pour une utilisation en portefeuille.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden max-w-xl mx-auto">
<div class="relative">
<video class="w-full" controls poster="https://picsum.photos/id/1018/1000/600/">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-50">
<button class="text-white text-4xl">
▶
</button>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Project Title</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Brief description of the project or video content.</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
</div>
</div>
</div>Composants associés
Composant du lecteur vidéo
Un composant de lecteur vidéo de style Brutalism avec un contraste élevé et une mise en page inhabituelle, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant du lecteur vidéo
Un composant de lecteur vidéo simple conçu selon les principes de Material Design avec une mise en page réactive et une prise en charge du thème sombre.
Composant du lecteur vidéo
Un composant de lecteur vidéo réactif conçu dans le style glassmorphism, avec des éléments translucides semblables à du verre dépoli avec des effets de flou, la prise en charge des thèmes sombres et des images de remplacement.