Composant du lecteur vidéo
Un composant de lecteur vidéo réactif conçu pour un blog ou la consommation de contenu avec des micro-interactions et une palette de couleurs pastel. Il comprend une fonctionnalité lecture/pause et un contrôle du volume. La conception comprend également la prise en charge du mode sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto overflow-hidden">
<div class="relative">
<img src="https://picsum.photos/500/300" class="w-full h-48 object-cover" alt="Video Thumbnail">
<div class="absolute bottom-0 left-0 right-0 bg-gray-900 bg-opacity-50 p-2 flex items-center justify-between">
<span class="text-white">Video Title</span>
<div class="flex items-center">
<button class="text-white p-1 hover:bg-gray-700 rounded-md transition duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
</button>
<input type="range" class="ml-2 w-24 slider slider-dark dark:bg-gray-700" min="0" max="100" value="50">
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="User Avatar">
<span class="text-gray-800 dark:text-gray-200">User Name</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the video content. It provides insight into what the video is about and engages the user to watch the video.</p>
</div>
</div>Composants associés
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.
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.
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.