Composant du lecteur vidéo
Un composant de lecteur vidéo conçu avec glassmorphism, avec un effet de verre dépoli avec des couleurs complémentaires. Il est interactif et réactif, adapté à la consommation de contenu de blog avec prise en charge du thème sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
<div class="relative w-full max-w-lg p-5 bg-white bg-opacity-20 backdrop-blur-lg rounded-xl shadow-lg border border-gray-200 dark:bg-gray-900 dark:bg-opacity-30 dark:border-gray-700">
<video class="w-full rounded-lg" 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="mt-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Video Title</h2>
<p class="text-gray-600 dark:text-gray-400">Brief description of the video content that gives users an idea of what to expect.</p>
</div>
<div class="flex items-center mt-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-2">
<p class="text-gray-800 dark:text-gray-200 font-medium">User Name</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Published on: <time datetime="2023-10-01">October 1, 2023</time></p>
</div>
</div>
</div>
</div>Composants associés
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.
Lecteur vidéo Composant 3
Un composant de lecteur vidéo réactif conçu dans le style Neumorphism avec prise en charge du thème sombre à l’aide de Tailwind CSS.