SimpleContentDisplay
Un componente de visualización de contenido simple con diseño receptivo y soporte de tema oscuro usando Tailwind CSS.
Código HTML
<div class="container mx-auto p-4 max-w-sm">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/123/400/300" alt="Placeholder image">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Article Title</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">This is a brief description of the article content. It provides a sneak peek into what the user can expect to read.</p>
<div class="flex items-center mt-4">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author avatar">
<span class="text-gray-700 dark:text-gray-400 text-sm">John Doe</span>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de visualización de contenido
Un componente de visualización de contenido responsivo que incorpora microinteracciones con animaciones atractivas centradas en las acciones del usuario. Incluye soporte para el modo oscuro y marcadores de posición para imágenes y avatares.
Componente Componentes de visualización de contenido
Un componente de visualización de contenido simple y vibrante con microinteracciones, diseño receptivo y soporte de temas oscuros, adecuado para blogs y consumo de contenido. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.
Componente de visualización de contenido
Un componente de pantalla nostálgico con diseño retro, con efectos responsivos y soporte para temas oscuros.