Lecteur vidéo minimaliste
Composant de lecteur vidéo codé en HTML avec Tailwind CSS. Il a un design minimaliste utilisant une palette de couleurs en niveaux de gris, destiné à une utilisation sur le tableau de bord. Il s’agit d’un composant complexe avec plusieurs éléments interactifs et est entièrement réactif avec la prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<!-- Video Area -->
<div class="relative" style="padding-top: 56.25%;">
<video controls class="absolute top-0 left-0 w-full h-full object-cover">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Controls and Info Area -->
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Video Title Goes Here</h3>
<div class="flex items-center space-x-4">
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</button>
</div>
</div>
<!-- Progress Bar -->
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5 mb-4">
<div class="bg-gray-700 dark:bg-gray-300 h-2.5 rounded-full" style="width: 50%;"></div>
</div>
<!-- Play/Pause Button (example - actual video controls are built-in) -->
<div class="flex justify-center">
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 px-6 py-2 rounded-full focus:outline-none">
Play
</button>
</div>
<!-- Additional Info/Metadata -->
<div class="mt-6 text-gray-600 dark:text-gray-400 text-sm">
<p>Views: 1.2M | Uploaded: 3 days ago</p>
</div>
</div>
</div>
</div>Composants associés
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.
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.
Composant du lecteur vidéo
Un composant de lecteur vidéo minimaliste conçu pour les interfaces de médias sociaux, avec une mise en page réactive avec prise en charge du thème sombre.