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 Component
A responsive content display component designed for business/corporate websites with dark mode support and a vibrant color scheme. It includes sections for user avatars, text content, and images.
Content Display Component
A nostalgic display component with retro design, featuring responsive effects and dark theme support.
Content Display Components Component
A simple and vibrant content display component with micro-interactions, responsive design, and dark theme support, suitable for blogs and content consumption. Uses picsum.photos for images and randomuser.me for avatars.