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.
Código HTML
<div class="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4 flex items-center justify-center">
<div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-red-500/50">
<div class="relative">
<img class="w-full h-48 object-cover transition-opacity duration-300 hover:opacity-80" src="https://picsum.photos/600/400?random=1" alt="Article Thumbnail">
<div class="absolute bottom-0 left-0 bg-black bg-opacity-50 dark:bg-opacity-70 text-white px-3 py-1 rounded-tr-lg text-sm font-semibold">
Article
</div>
</div>
<div class="p-5">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 transition-colors duration-300 hover:text-purple-700 dark:hover:text-red-400">
The Future of Web Development
</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
Explore the exciting new trends and technologies shaping the web, from AI-powered tools to immersive user experiences.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-purple-500 dark:border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold text-sm">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-xs">2 hours ago</p>
</div>
</div>
<a href="#" class="text-purple-600 dark:text-red-400 hover:text-purple-800 dark:hover:text-red-600 transition-colors duration-300 font-medium text-sm flex items-center group">
Read More
<svg class="ml-1 w-4 h-4 transform transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</a>
</div>
</div>
</div>
</div>Componentes relacionados
Componentes de visualización de contenido
Un componente de visualización de contenido de redes sociales receptivo diseñado en estilo skeuomórfico con colores pastel, con múltiples elementos interactivos y soporte para modo oscuro.
Tarjeta postal retro para redes sociales
Un componente de postal de redes sociales receptivo con una estética retro / vintage de los 80 / 90, que utiliza un esquema de color análogo (cielo, verde azulado, morado) con acentos fucsia. Cuenta con soporte para modo oscuro y efectos interactivos de desplazamiento. El contenido incluye el avatar del usuario, el nombre de usuario, la marca de tiempo, la publicación de texto, la imagen y los botones de acción (me gusta, comentar, compartir). Construido con Tailwind CSS.
Swiss_International_Typography_Content_Display_Component
Un componente de visualización de contenido limpio y minimalista para tableros, que enfatiza la tipografía y los sistemas de cuadrícula con colores neutros fríos y capacidad de respuesta completa.