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.
Código HTML
<div class="flex flex-col items-center mb-8 p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg transition-shadow duration-300 ease-in-out hover:shadow-xl">
<div class="relative w-full h-0 pb-56 overflow-hidden rounded-lg shadow-inner bg-gray-200 dark:bg-gray-800">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-sm" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
<div class="ml-4">
<h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h5>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted on January 1, 2023</p>
</div>
</div>
</div>
<style>
/* Neumorphism styles */
.bg-white {
background-color: #f0f0f0;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
-10px -10px 20px rgba(255, 255, 255, 1);
}
.dark .bg-gray-900 {
background-color: #1c1c1c;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5),
inset -10px -10px 20px rgba(255, 255, 255, 0.1);
}
.shadow-inner {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.9);
}
</style>Componentes relacionados
Componente de incrustación de medios
Un componente de incrustación de medios receptivo diseñado con un estilo de neumorfismo, con colores vibrantes y una interfaz interactiva adecuada para aplicaciones de tablero.
Componente de incrustación de medios: tonos tierra minimalistas
Un componente minimalista de incrustación de medios para paneles, con diseño responsivo y soporte de temas oscuros, utilizando tonos tierra. Muestra un reproductor de vídeo, el título, la descripción y la información del canal.
Componente de incrustación de medios
Un componente de incrustación de medios con un estilo de diseño 3D para profundidad y compromiso, efectos receptivos y compatibilidad con el modo oscuro.