Composant du lecteur vidéo
Un composant de lecteur vidéo réactif stylisé avec Tailwind CSS axé sur les micro-interactions et la prise en charge des thèmes sombres.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105 duration-200" role="video" aria-label="Video Player">
<div class="relative">
<img src="https://picsum.photos/800/450?random=1" alt="Video thumbnail" class="w-full h-48 object-cover">
<button class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 text-white text-3xl rounded-full opacity-0 transition-opacity duration-200 hover:opacity-100">
▶
</button>
</div>
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<h2 class="text-lg font-semibold dark:text-white">Video Title</h2>
</div>
<p class="text-sm text-gray-700 dark:text-gray-300">Description of the video goes here. It should be engaging and concise.</p>
</div>
</div>Composants associés
Composant du lecteur vidéo
Composant de lecteur vidéo minimaliste / plat pour le commerce électronique, réactif avec prise en charge du thème sombre
Composant du lecteur vidéo
Composant de lecteur vidéo avec style Glassmorphism, schéma de couleurs analogue et complexité modérée à des fins de blog/contenu, avec une conception réactive et une prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de Javascript.
Lecteur vidéo skeuomorphe
Composant de lecteur vidéo skeuomorphe avec effets réactifs et prise en charge du thème sombre.