Componentes de medios Componente 2
Un componente multimedia de estilo retro/vintage con un diseño nostálgico inspirado en la estética de los años 80/90, con efectos responsivos y compatibilidad con temas oscuros, utilizando Tailwind CSS.
Código HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/retro/400/300" alt="Retro Image">
<div class="p-6">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div>
<h2 class="text-xl font-bold text-gray-900 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm">@johndoe</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample text for the media component, showcasing a retro design that brings back memories from the 80s and 90s.</p>
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400 font-semibold">Read More</a>
</div>
</div>
Componentes relacionados
Componente de componentes de medios
Un componente de redes sociales complejo, receptivo y compatible con el modo oscuro con un estilo Glassmorphism que utiliza colores vibrantes.
Componente de componentes de medios
Un componente multimedia diseñado con el estilo skeuomorphism utilizando Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Componente de componentes de medios
Un componente multimedia responsivo para el comercio electrónico con Material Design y combinación de colores monocromática.