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
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 multimédia - Sports/Fitness
Un composant multimédia réactif et minimaliste pour les applications de sport/fitness, avec des couleurs vives, une typographie forte et une mise en page basée sur une grille. Inclut la prise en charge du mode sombre.
Composant d’intégration de média
Un composant d’intégration multimédia de style Neumorphism adapté à la consommation de blogs et de contenus, doté d’une palette de couleurs triadique. Conception réactive avec prise en charge du mode sombre.