Social Media Timeline Component - Glassmorphism
A complex, responsive social media timeline component featuring glassmorphism design with analogous color scheme, dark mode support, and interactive elements for social networking interfaces.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-8 flex items-center justify-center font-sans">
<div class="w-full max-w-4xl">
<h1 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 text-gray-900 dark:text-white relative z-10">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-400 dark:to-purple-500">Your Feed</span>
</h1>
<div class="space-y-8 relative">
<!-- Timeline Line -->
<div class="absolute left-1/2 -translate-x-1/2 w-0.5 bg-gradient-to-b from-blue-300 to-indigo-400 dark:from-blue-600 dark:to-purple-700 h-full hidden md:block"></div>
<!-- Post 1 -->
<article class="relative md:flex md:items-start md:even:flex-row-reverse group">
<div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
<div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
<div class="flex items-center space-x-3 mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-400 dark:border-blue-500 shadow-md">
<div>
<h3 class="font-semibold text-lg text-gray-900 dark:text-white">Alex Johnson</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">@alex_joh • 2 hours ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-100 leading-relaxed">
Just finished an amazing hike! The views were absolutely breathtaking. Nature truly is the best therapy. #Hiking #NatureLover #AdventureTime
</p>
<img src="https://picsum.photos/600/400?random=1" alt="Post Image" class="w-full h-auto rounded-lg object-cover border border-white/10 dark:border-gray-700/10 shadow-sm">
<div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
<div class="flex space-x-4">
<button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
<svg class="w-5 h-5" 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 22.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>128</span>
</button>
<button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
<svg class="w-5 h-5" 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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
<span>34</span>
</button>
</div>
<button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
<svg class="w-5 h-5" 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.684 13.342C8.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
<span>Share</span>
</button>
</div>
</div>
</div>
<div class="hidden md:block w-fit text-blue-500 dark:text-blue-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-blue-300 dark:border-blue-600 shadow-md"></div>
</article>
<!-- Post 2 -->
<article class="relative md:flex md:items-start md:even:flex-row-reverse group">
<div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
<div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
<div class="flex items-center space-x-3 mb-4">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-indigo-400 dark:border-indigo-500 shadow-md">
<div>
<h3 class="font-semibold text-lg text-gray-900 dark:text-white">Sarah Chen</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">@sarah_c_design • 4 hours ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-100 leading-relaxed">
New design mockups are finally ready! So excited to get feedback on the new UX flow. What do you all think of the dark mode implementation?
</p>
<img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="w-full h-auto rounded-lg object-cover border border-white/10 dark:border-gray-700/10 shadow-sm">
<div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
<div class="flex space-x-4">
<button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
<svg class="w-5 h-5" 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 22.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>210</span>
</button>
<button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
<svg class="w-5 h-5" 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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
<span>58</span>
</button>
</div>
<button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
<svg class="w-5 h-5" 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.684 13.342C8.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
<span>Share</span>
</button>
</div>
</div>
</div>
<div class="hidden md:block w-fit text-indigo-500 dark:text-indigo-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-indigo-300 dark:border-indigo-600 shadow-md"></div>
</article>
<!-- Post 3 -->
<article class="relative md:flex md:items-start md:even:flex-row-reverse group">
<div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
<div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
<div class="flex items-center space-x-3 mb-4">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-purple-500 shadow-md">
<div>
<h3 class="font-semibold text-lg text-gray-900 dark:text-white">Michael Lee</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">@mike_dev • 8 hours ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-100 leading-relaxed">
Coding late tonight, building out new features for the app! Energy drinks and good music are getting me through. Almost there! 💻 #FrontendDev #CodingLife
</p>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
<div class="flex space-x-4">
<button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
<svg class="w-5 h-5" 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 22.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>95</span>
</button>
<button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
<svg class="w-5 h-5" 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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
<span>21</span>
</button>
</div>
<button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
<svg class="w-5 h-5" 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.684 13.342C8.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
<span>Share</span>
</button>
</div>
</div>
</div>
<div class="hidden md:block w-fit text-purple-500 dark:text-purple-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-purple-300 dark:border-purple-600 shadow-md"></div>
</article>
</div>
</div>
</div>Related Components
Timeline Component
A complex, responsive timeline component designed for educational platforms, featuring a clean, minimalist typography-focused design with earth tones and full dark mode support.
Grayscale Social Media Timeline
A responsive, dark-mode ready social media timeline component built with Tailwind CSS. It features a strict grayscale color scheme, and complex post cards with user avatars, post content (text and images), engagement stats, and action buttons. Designed for social networking interfaces with multiple interactive elements on each post. The design supports dark backgrounds to reduce eye strain. No JavaScript is used.
Timeline Component
A minimalist timeline component designed for blog and content consumption, featuring earth tone colors and dark mode support using Tailwind CSS.