Componente Componentes de visualización de contenido
Un componente de visualización de contenido con microinteracciones, diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS. Cuenta con efectos de desplazamiento sutiles y animaciones de enfoque en elementos interactivos.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
<div class="max-w-sm mx-auto rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden">
<img class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" src="https://picsum.photos/600/400" alt="Placeholder image">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2 transform transition duration-500 hover:text-indigo-600 dark:hover:text-indigo-400">Component Title</h2>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4 transform transition duration-500 hover:translate-x-1">This is a description of the content. It is responsive and supports dark theme.</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4 transform transition duration-500 hover:rotate-6" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of the author">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none transform transition duration-500 hover:underline">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">7 min read</p>
</div>
</div>
<button class="px-3 py-1 bg-indigo-500 text-white text-xs font-bold rounded hover:bg-indigo-600 dark:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-opacity-50 transform transition duration-500 hover:-translate-y-1">Read More</button>
</div>
</div>
</div>
</div>Componentes relacionados
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.
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.
Componentes de visualización de contenido Componente 11
Un componente de visualización de contenido de estilo retro/vintage con diseños nostálgicos de los años 80/90, con efectos responsivos y compatibilidad con temas oscuros.