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.
HTML Code
<div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<div class="relative w-full max-w-2xl rounded-lg overflow-hidden shadow-lg">
<video class="w-full h-auto" controls>
<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 bg-black opacity-50"></div>
</div>
<div class="mt-4 text-center text-lg font-bold text-gray-800 dark:text-white">Bold Video Title</div>
<div class="mt-2 text-center text-gray-600 dark:text-gray-300">An engaging video description goes here.</div>
<div class="mt-4 flex items-center justify-center space-x-4">
<img src="https://picsum.photos/50/50" alt="User Avatar" class="rounded-full border-2 border-gray-800 dark:border-white">
<p class="text-sm font-semibold text-gray-800 dark:text-white">User Name</p>
</div>
<div class="mt-4 flex justify-between w-full max-w-md">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Like</button>
<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Dislike</button>
</div>
</div>Composants associés
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.
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.
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.