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 diseñado en un estilo skeuomórfico para el comercio electrónico con un tema oscuro. Exhibe productos con elementos mínimos, utilizando un esquema de color análogo para una estética agradable.
Divertida pantalla de contenido fotográfico en tono joya
Un componente de visualización de contenido complejo, lúdico y divertido para un portafolio o galería de fotografía, con tonos joya brillantes, elementos redondeados y un diseño receptivo con soporte para modo oscuro. Muestra múltiples elementos interactivos como imágenes destacadas, diseños de cuadrícula y secciones de perfil.
Componente de visualización de contenido
Un componente de visualización de contenido con diseño de glassmorphism con diseño responsivo y soporte de temas oscuros.