Componente de incrustación de medios skeuomórficos
Un componente de incrustación de medios receptivo con diseño de skeuomorfismo, combinación de colores análoga y complejidad moderada para sitios web comerciales. Incluye soporte para el modo oscuro usando Tailwind CSS.
Código HTML
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl">
<div class="relative pb-9/16 mb-4">
<iframe class="absolute inset-0 w-full h-full rounded-md shadow-inner" 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="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 ring-2 ring-gray-400 dark:ring-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Skeuomorphic Media Title</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Channel Name</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">
This is a description of the media content. It provides a brief overview
and context for the embedded video or audio. The design features subtle
shadows and gradients to mimic a tangible, real-world object.
</p>
</div>Componentes relacionados
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.
Componente de incrustación de medios
Componente de incrustación de medios interactivo con estilo Glassmorphism, combinación de colores análoga y compatibilidad con el modo oscuro para el consumo de contenido.
Componente de incrustación de medios: cripto/blockchain
Un componente de incrustación de medios simple y receptivo diseñado para aplicaciones de criptomonedas o blockchain, con tonos sepia/marrón y soporte de modo oscuro para reducir la fatiga visual.