Componente de visualización de contenido
Un componente de pantalla nostálgico con diseño retro, con efectos responsivos y soporte para temas oscuros.
Código HTML
<div class="max-w-xs mx-auto bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Nostalgic Image">
<div class="p-4">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
<div class="ml-3">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Retro Nostalgia</h2>
<p class="text-gray-600 dark:text-gray-400">Explore the vibrant designs of the 80s and 90s that inspired our modern aesthetics.</p>
</div>
</div>
<div class="mt-4">
<h3 class="text-md font-semibold text-gray-700 dark:text-gray-300">Join the Movement</h3>
<p class="text-gray-500 dark:text-gray-400">Be part of our journey as we explore retro designs, culture, and style.
</p>
</div>
<div class="flex justify-between mt-4">
<span class="text-gray-600 dark:text-gray-400">#Retro #Vintage</span>
<button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Learn More</button>
</div>
</div>
</div>Componentes relacionados
Pastel3DBlogContentCard
Un componente de visualización de contenido responsivo para blogs o secciones de contenido, diseñado con Tailwind CSS. Cuenta con un diseño simple con una estética inspirada en 3D que utiliza sombras y efectos de desplazamiento. El esquema de color es pastel suave para el modo claro, con un tema de modo oscuro compatible. El componente incluye una imagen, un título, metadatos (autor/fecha), un extracto y un botón 'Leer más'. Las imágenes de marcador de posición se utilizan de picsum.photos y randomuser.me.
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.
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.