Lecteur vidéo
Composant de lecteur vidéo avec style Material Design, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="max-w-sm mx-auto rounded-md overflow-hidden shadow-lg bg-white dark:bg-gray-800">
<div class="relative">
<img class="w-full" src="https://picsum.photos/600/400" alt="Video thumbnail">
<div class="absolute inset-0 flex items-center justify-center">
<button class="text-white text-6xl">
▶
</button>
</div>
</div>
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Video Title</div>
<p class="text-gray-700 dark:text-gray-300 text-base">
Video description goes here.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#tag1</span>
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#tag2</span>
</div>
</div>Composants associés
Composant du lecteur vidéo
Composant de lecteur vidéo réactif avec design Glassmorphism, palette de couleurs Earth tones et prise en charge du mode sombre. Utilise un HTML simple et un CSS Tailwind.
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.
Composant du lecteur vidéo
Un composant de lecteur vidéo de style rétro/vintage avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.