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.
Código HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>
<div class="p-4">
<img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full rounded-lg hover:scale-105 transition-transform duration-300">
<p class="mt-2 text-gray-700 dark:text-gray-300">This is a brief description of the content. It engages the user with interesting information and encourages interaction.</p>
<a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Read More</a>
</div>
</div>Componentes relacionados
Componente de visualización de contenido
Un componente de visualización de contenido responsivo con estilo Glassmorphism, con fondo borroso y elementos translúcidos con soporte para el modo oscuro.
Tarjeta de tablero Triádico de Material Design
Un componente de visualización de contenido de tablero simple y receptivo con estética de Material Design, que utiliza un esquema de color triádico y admite el modo oscuro. Adecuado para mostrar métricas o información clave.
SimpleContentDisplay
Un componente de visualización de contenido simple con diseño receptivo y soporte de tema oscuro usando Tailwind CSS.