Componente de medios minimalista
Un componente multimedia simple, limpio y receptivo para sitios web comerciales/corporativos, con colores dulces/dulces y soporte para modo oscuro.
Código HTML
<div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-md mx-auto bg-pink-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:max-w-2xl lg:max-w-4xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/400/300?random=1" alt="Modern business workspace">
</div>
<div class="p-4 md:p-6">
<div class="uppercase tracking-wide text-sm text-pink-500 dark:text-pink-400 font-semibold">Company News</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline transition-colors duration-300">Innovative Solutions for Future Growth</a>
<p class="mt-2 text-gray-700 dark:text-gray-300 text-sm md:text-base">Our latest report highlights key strategies and technological advancements that are set to redefine industry standards. Discover how we're shaping tomorrow's landscape.</p>
<div class="mt-4 flex items-center">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Author Avatar">
</div>
<div class="ml-3 text-sm text-gray-600 dark:text-gray-400">
<p class="font-medium">Jane Doe</p>
<p>CEO, Tech Innovations</p>
</div>
</div>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente de componentes de medios de glassmorphism
Componente multimedia de Glassmorphism con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS
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.
Tarjeta de blog de diseño de materiales
Un componente de tarjeta de publicación de blog receptivo con una imagen, título, extracto e información del autor, diseñado en un estilo de Material Design con tonos cálidos al atardecer. Incluye soporte para modo oscuro.