Componente de incrustación de medios
Un componente de incrustación de medios simple y receptivo con diseño 3D en escala de grises y soporte de modo oscuro, adecuado para sitios web comerciales. Utiliza Tailwind CSS para el estilo.
Código HTML
<div class="relative flex items-center justify-center h-96 overflow-hidden bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg m-4">
<!-- 3D effect background elements (simplified) -->
<div class="absolute inset-0 z-0 pointer-events-none transform scale-150">
<div class="absolute inset-0 bg-gradient-to-br from-gray-300 via-gray-100 to-gray-300 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700 opacity-50"></div>
<div class="absolute inset-0 border-4 border-gray-200 dark:border-gray-800 rounded-lg transform rotate-3"></div>
</div>
<!-- Content area -->
<div class="relative z-10 p-8 bg-white dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 rounded-lg shadow-xl max-w-md text-center">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Embed Media</h2>
<!-- Placeholder for embedded media (e.g., iframe for YouTube,- Vimeo) -->
<!-- Replace with actual embed code -->
<div class="w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
<p>Media Placeholder</p>
</div>
<p class="mt-4 text-gray-600 dark:text-gray-300 text-sm">Embed your videos, maps, or other media here.</p>
</div>
</div>Componentes relacionados
Componente de incrustación de medios
Un componente de incrustación de medios retro/vintage diseñado con nostalgia de los años 80 y 90. Cuenta con un estilo receptivo y compatibilidad con el modo oscuro con Tailwind CSS.
Componente de incrustación de medios de neumorfismo
Un componente neumórfico de incrustación de medios para sitios web comerciales, con diseño responsivo y soporte de temas oscuros con colores complementarios.
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.