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 réactif conçu dans un style brutaliste avec prise en charge du thème sombre. Il présente un contraste élevé et une mise en page audacieuse, utilisant Tailwind CSS pour le style et comprend des images et des avatars de remplacement.
Lecteur vidéo skeuomorphe
Composant de lecteur vidéo skeuomorphe avec effets réactifs et prise en charge du thème sombre.
Composant du lecteur vidéo
Un composant de lecteur vidéo réactif conçu dans le style glassmorphism, avec des éléments translucides semblables à du verre dépoli avec des effets de flou, la prise en charge des thèmes sombres et des images de remplacement.