Componente de incrustación de medios
Un componente de incrustación de medios receptivo con soporte de tema oscuro para sitios de blog/contenido, diseñado con principios de diseño de materiales, un esquema de color triádico y complejidad moderada. Incluye un marcador de posición de vídeo incrustado y enlaces a artículos relacionados.
Código HTML
<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>Componentes relacionados
Componente de incrustación de medios
Un componente de incrustación de medios receptivo diseñado con el estilo Glassmorphism, con elementos interactivos para el consumo de contenido.
Componente de incrustación de medios
Un componente de incrustación de medios brutalista, vibrante y complejo para blogs, construido con diseño receptivo y soporte de modo oscuro usando Tailwind CSS.
Componente de incrustación de medios
Un componente de incrustación de medios interactivo diseñado con el estilo Neumorphism en Tailwind CSS, que admite el modo oscuro.