Componente de componentes de medios
Un componente multimedia responsivo con microinteracciones con animaciones atractivas, diseñado con Tailwind CSS. Es compatible con el tema oscuro e incluye imágenes de marcador de posición y avatares.
Código HTML
<div class="w-full max-w-xs bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
<img src="https://picsum.photos/400/200" alt="Media Image" class="w-full h-32 object-cover">
<div class="p-4">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-md">
<div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Media Title</h2>
<p class="text-gray-600 dark:text-gray-300">Media description goes here. It can be a brief overview or any content relevant to the media.</p>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<button class="w-full py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150">Watch Now</button>
</div>
</div>Componentes relacionados
Brutalismo Pastel Componente de Medios
Un componente mediático simple y brutalista con una combinación de colores pastel, diseñado para un blog. Responsivo con soporte para modo oscuro.
Componente de componentes de medios
Un componente multimedia responsivo inspirado en estilos de diseño retro/vintage, con una estética nostálgica de los años 80/90. Es compatible con el tema oscuro con Tailwind CSS e incluye imágenes de marcador de posición y avatares.
Monospace_Developer_Media_Component
Un componente multimedia complejo y orientado a la educación con un estilo de diseño monoespaciado/desarrollador y una combinación de colores océano/azul, diseñado para plataformas de aprendizaje. Incluye reproducción de medios, fragmentos de código y secciones de contenido estructurado.