Composant d’intégration de média
Un composant d’intégration multimédia réactif avec prise en charge du thème sombre pour les sites de blog/contenu, stylisé selon les principes de conception matérielle, une palette de couleurs triadique et une complexité modérée. Comprend un espace réservé vidéo intégré et des liens vers des articles connexes.
HTML Code
<div class="container mx-auto p-4 max-w-3xl">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="relative" style="padding-top: 56.25%;">
<!-- 16:9 Aspect Ratio -->
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Embedded Media Title</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Published on October 27, 2023</p>
<p class="text-gray-700 dark:text-gray-200 mb-4">This is a description of the embedded media content. It provides context and information about the video.</p>
<div class="border-t border-gray-200 dark:border-gray-700 pt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Related Articles</h3>
<ul>
<li class="mb-2">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 1</a>
</li>
<li class="mb-2">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 2</a>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 3</a>
</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 de média
Un composant d’intégration multimédia réactif avec un design Glassmorphism, des couleurs de terre et une prise en charge du mode sombre, conçu avec Tailwind CSS pour les cas d’utilisation des médias sociaux. Comprend un effet de verre dépoli et utilise des images/avatars de substitution.
Composant d’intégration de média
Un composant d’intégration multimédia minimaliste et plat avec une palette de couleurs de tons de terre, adapté aux sites Web d’entreprise / d’entreprise. Il s’agit d’un composant de complexité modérée avec une conception réactive et une prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.