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.
Código HTML
<div class="min-h-screen bg-stone-200 dark:bg-slate-900 py-8 flex items-center justify-center">
<div class="max-w-xl w-full mx-auto p-1 bg-gradient-to-br from-fuchsia-500 via-purple-500 to-cyan-500 rounded-xl shadow-2xl">
<div class="bg-stone-100 dark:bg-slate-800 rounded-lg p-6">
<!-- Header -->
<div class="flex items-center space-x-4 mb-6 pb-4 border-b-2 border-dashed border-sky-300 dark:border-sky-700">
<img class="w-16 h-16 rounded-full border-4 border-fuchsia-500 dark:border-fuchsia-400 object-cover shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-xl font-bold text-purple-600 dark:text-purple-400 hover:underline cursor-pointer">RetroGal92</p>
<p class="text-sm text-slate-500 dark:text-slate-400">Posted 2 hours ago</p>
</div>
<div class="ml-auto">
<svg class="w-6 h-6 text-slate-500 dark:text-slate-400 hover:text-sky-600 dark:hover:text-sky-300 cursor-pointer transition-colors duration-150" 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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
</div>
</div>
<!-- Content -->
<div class="mb-6">
<p class="text-slate-700 dark:text-slate-200 text-lg leading-relaxed mb-4">
Just vibin' with these retro tunes! <span class="text-2xl">🎧</span> Anyone else remember mixtapes and oversized headphones? Good times! <span class="text-yellow-400">✨</span>
<a href="#" class="text-teal-600 dark:text-teal-400 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 font-semibold transition-colors duration-150">#RetroLife</a>
<a href="#" class="text-teal-600 dark:text-teal-400 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 font-semibold transition-colors duration-150">#90sKid</a>
</p>
<img class="w-full h-auto rounded-lg shadow-lg border-2 border-teal-500 dark:border-teal-400 object-cover" src="https://picsum.photos/seed/retroscene1/600/400" alt="Retro Scene">
</div>
<!-- Actions -->
<div class="flex items-center justify-between text-slate-600 dark:text-slate-300">
<button class="flex items-center space-x-2 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors duration-200 group">
<svg class="w-6 h-6 group-hover:fill-current transition-all duration-200" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
<span class="font-medium group-hover:font-bold text-sm sm:text-base">1.2k Likes</span>
</button>
<button class="flex items-center space-x-2 hover:text-sky-600 dark:hover:text-sky-400 transition-colors duration-200 group">
<svg class="w-6 h-6" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span class="font-medium group-hover:font-bold text-sm sm:text-base">87 Comments</span>
</button>
<button class="flex items-center space-x-2 hover:text-teal-600 dark:hover:text-teal-400 transition-colors duration-200 group">
<svg class="w-6 h-6" 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="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4m0 0l-4 4m4-4v12"></path></svg>
<span class="font-medium group-hover:font-bold text-sm sm:text-base">Share</span>
</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de visualización de contenido
Un componente de visualización de contenido simple y receptivo diseñado en un estilo brutalista con colores complementarios. Adecuado para sitios web comerciales / corporativos, compatible con el modo oscuro.
Componente de visualización de contenido
Un componente de visualización de contenido responsivo con un estilo de diseño minimalista y plano, ideal para blogs y consumo de contenido. Tiene un esquema de color en escala de grises y está equipado con elementos interactivos a la vez que admite el modo oscuro.
Componente de visualización de contenido
Un componente con estilo glassmorphism para mostrar contenido de portafolio con elementos interactivos, compatible con el modo oscuro.