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
Composant de lecteur vidéo avec style Glassmorphism, schéma de couleurs analogue et complexité modérée à des fins de blog/contenu, avec une conception réactive et une prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de Javascript.
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 de lecteur vidéo arc-en-ciel dégradé
Un composant de lecteur vidéo épuré et minimaliste pour les tableaux de bord, doté d’un schéma de couleurs arc-en-ciel dégradé, d’un design réactif et d’une prise en charge du mode sombre, incarnant le style typographique suisse/international.