Retro Social Media Post Card
A responsive social media post card component with a retro/vintage 80s/90s aesthetic, using an analogous color scheme (Sky, Teal, Purple) with Fuchsia accents. Features dark mode support and interactive hover effects. Content includes user avatar, username, timestamp, text post, image, and action buttons (like, comment, share). Built with Tailwind CSS.
HTML Code
<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>Related Components
Content Display Components
A 3D design portfolio showcasing work or products with a grayscale color scheme and responsive design, supporting dark mode.
Content Display Components Component
A responsive content display component with dark mode support for business/corporate websites.
Swiss_International_Typography_Content_Display_Component
A clean, minimalist content display component for dashboards, emphasizing typography and grid systems with cool neutral colors and full responsiveness.