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
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 lecteur vidéo de style Glassmorphism avec des éléments translucides semblables à du verre givré, une palette de couleurs pastel et une interface complexe adaptée aux sites Web d’entreprise. Il prend en charge le responsive design et un thème sombre utilisant Tailwind CSS, sans JavaScript.