Composant d’intégration de média
Un composant d’intégration multimédia réactif avec prise en charge des thèmes sombres, une mise en page complexe et une palette de couleurs complémentaire, conçu pour les tableaux de bord.
HTML Code
<div class="container mx-auto p-6 bg-gray-900 text-gray-200">
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-2/3 px-4 mb-6 lg:mb-0">
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="relative" style="padding-top: 56.25%;">
<iframe class="absolute inset-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 class="p-6">
<h3 class="text-xl font-semibold mb-3 text-teal-400 dark:text-teal-500">Video Title Here</h3>
<p class="text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center text-gray-500 text-sm">
<span><i class="far fa-eye mr-2"></i>1.2M Views</span>
<span class="ml-4"><i class="far fa-comment mr-2"></i>3.5K Comments</span>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/3 px-4">
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<h4 class="text-lg font-semibold mb-4 text-orange-400 dark:text-orange-500">Related Content</h4>
<ul>
<li class="flex items-center mb-4">
<img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1018/60/60" alt="Related Video Thumbnail">
<div>
<p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Related Video Title</p>
<p class="text-gray-500 text-sm">Channel Name</p>
</div>
</li>
<li class="flex items-center mb-4">
<img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1015/60/60" alt="Related Video Thumbnail">
<div>
<p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Another Related Video</p>
<p class="text-gray-500 text-sm">Another Channel</p>
</div>
</li>
<li class="flex items-center">
<img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1019/60/60" alt="Related Video Thumbnail">
<div>
<p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Yet Another Video</p>
<p class="text-gray-500 text-sm">Yet Another Channel</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>Composants associés
Composant d’intégration de média rétro
Un composant d’intégration multimédia réactif avec un design rétro/vintage, des couleurs vives, une complexité modérée et une prise en charge du mode sombre, adapté aux plateformes de commerce électronique.
Composant d’intégration de média
Un composant d’intégration multimédia simple et réactif avec conception 3D en niveaux de gris et prise en charge du mode sombre, adapté aux sites Web d’entreprise. Utilise Tailwind CSS pour le coiffage.
Composant d’intégration de média
Un composant d’intégration multimédia réactif conçu dans le style Glassmorphism, avec des éléments interactifs pour la consommation de contenu.