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 un design glassmorphism, une palette de couleurs pastel et une prise en charge du mode sombre, adapté à la consommation de blogs et de contenu.
Composant d’intégration de média
Un composant d’intégration multimédia rétro/vintage conçu avec la nostalgie des années 80 et 90. Il dispose d’un style réactif et d’une prise en charge du mode sombre avec Tailwind CSS.
Composant d’intégration de média
Un composant d’intégration multimédia réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.