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.
HTML Code
<div class="dark:bg-gray-900 dark:text-white py-12">
<div class="container mx-auto px-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden lg:flex lg:max-w-6xl mx-auto">
<div class="lg:w-1/2">
<div class="relative" style="padding-top: 56.25%;">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/your_video_id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-screen" allowfullscreen></iframe>
</div>
</div>
<div class="lg:w-1/2 p-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Video Title</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Posted on May 15, 2023</p>
</div>
</div>
</div>
</div>
<!-- Example of Glassmorphism effect on a separate element -->
<div class="mt-12 max-w-4xl mx-auto backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-700 rounded-lg p-6">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Glassmorphism Effect Example</h3>
<p class="text-gray-700 dark:text-gray-200">This is an example of a frosted glass-like element with a blur effect, demonstrating the Glassmorphism style.</p>
</div>
</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.
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.
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.