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.
Código HTML
<div class="max-w-sm mx-auto">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Placeholder Image">
<div class="p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Media Title</h2>
<p class="text-gray-700 dark:text-gray-300">This is a description of the media component. It mimics a real-world object with its skeuomorphic design.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-sm text-gray-600 dark:text-gray-400">Posted by John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
</div>
</div>
</div>
</div>
</div>
<style>
/* Dark theme support */
@media (prefers-color-scheme: dark) {
body {
background-color: #1A202C;
}
}
</style>Componentes relacionados
Brutalism_Job_Media_Card
Un componente multimedia complejo de estilo brutalista para una bolsa de trabajo, con alto contraste, tipografía audaz y una combinación de colores púrpura/violeta. Responsivo con soporte para modo oscuro.
Neumorfismo simple Componente de medios de comercio electrónico
Componente de medios de estilo neumorfismo con tonos tierra, complejidad simple, para sitio de comercio electrónico, con diseño receptivo y soporte de tema oscuro. Utiliza picsum.photos para las imágenes.
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.