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.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 py-12 font-sans">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-2xl">
<h1 class="text-3xl sm:text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-8 sm:mb-12">
Community Feed
</h1>
<div class="space-y-8 sm:space-y-12">
<!-- Post 1 -->
<div class="bg-white dark:bg-gray-800 shadow-xl dark:shadow-2xl dark:shadow-gray-900/50 rounded-xl p-4 sm:p-6 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-gray-700/60">
<!-- Post Header -->
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-3 sm:space-x-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">Sarah Miller</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
</div>
</div>
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
</div>
<!-- Post Content Text -->
<div class="mb-4">
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
Exploring the city vibes today! Found this amazing little cafe. ☕️ Highly recommend the almond croissant.
The architecture around here is stunning. So much history! #CityLife #CafeHopping #UrbanExploration
</p>
</div>
<!-- Post Content Image -->
<div class="mb-5 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
<img src="https://picsum.photos/seed/citycafe/800/500" alt="Cafe image" class="w-full h-auto object-cover max-h-[500px]">
</div>
<!-- Stats -->
<div class="flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-3 px-1">
<div><span>1.2k Likes</span></div>
<div><span>87 Comments</span></div>
</div>
<!-- Actions -->
<div class="border-t border-gray-200 dark:border-gray-700 pt-3">
<div class="flex items-center justify-around text-gray-600 dark:text-gray-400">
<button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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" />
</svg>
<span class="font-medium text-xs sm:text-sm">Like</span>
</button>
<button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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" />
</svg>
<span class="font-medium text-xs sm:text-sm">Comment</span>
</button>
<button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
</svg>
<span class="font-medium text-xs sm:text-sm">Share</span>
</button>
</div>
</div>
</div>
<!-- End Post 1 -->
<!-- Post 2 -->
<div class="bg-white dark:bg-gray-800 shadow-xl dark:shadow-2xl dark:shadow-gray-900/50 rounded-xl p-4 sm:p-6 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-gray-700/60">
<!-- Post Header -->
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-3 sm:space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">Alex Johnson</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted 5 hours ago</p>
</div>
</div>
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
</div>
<!-- Post Content Text -->
<div class="mb-4">
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
Just finished a great workout session. Feeling energized! 💪 Remember to stay hydrated folks. #FitnessMotivation #HealthyLifestyle
</p>
</div>
<!-- Post Content Image (Optional - No image for this post to show variation) -->
<!-- <div class="mb-5 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
<img src="https://picsum.photos/seed/workout/800/400" alt="Workout image" class="w-full h-auto object-cover max-h-[500px]">
</div> -->
<!-- Stats -->
<div class="flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-3 px-1">
<div><span>850 Likes</span></div>
<div><span>45 Comments</span></div>
</div>
<!-- Actions -->
<div class="border-t border-gray-200 dark:border-gray-700 pt-3">
<div class="flex items-center justify-around text-gray-600 dark:text-gray-400">
<button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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" />
</svg>
<span class="font-medium text-xs sm:text-sm">Like</span>
</button>
<button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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" />
</svg>
<span class="font-medium text-xs sm:text-sm">Comment</span>
</button>
<button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
</svg>
<span class="font-medium text-xs sm:text-sm">Share</span>
</button>
</div>
</div>
</div>
<!-- End Post 2 -->
<!-- Post 3 -->
<div class="bg-white dark:bg-gray-800 shadow-xl dark:shadow-2xl dark:shadow-gray-900/50 rounded-xl p-4 sm:p-6 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-gray-700/60">
<!-- Post Header -->
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-3 sm:space-x-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">Linda K.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted 1 day ago</p>
</div>
</div>
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
</div>
<!-- Post Content Text -->
<div class="mb-4">
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
Spent the afternoon reading in the park. Such a peaceful escape from the hustle and bustle. What are you reading currently?
#BookLover #PeacefulMoments #NatureReads 🌳📖
</p>
</div>
<!-- Post Content Image -->
<div class="mb-5 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
<img src="https://picsum.photos/seed/parkreading/800/550" alt="Park reading image" class="w-full h-auto object-cover max-h-[500px]">
</div>
<!-- Stats -->
<div class="flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-3 px-1">
<div><span>980 Likes</span></div>
<div><span>152 Comments</span></div>
</div>
<!-- Actions -->
<div class="border-t border-gray-200 dark:border-gray-700 pt-3">
<div class="flex items-center justify-around text-gray-600 dark:text-gray-400">
<button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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" />
</svg>
<span class="font-medium text-xs sm:text-sm">Like</span>
</button>
<button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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" />
</svg>
<span class="font-medium text-xs sm:text-sm">Comment</span>
</button>
<button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
</svg>
<span class="font-medium text-xs sm:text-sm">Share</span>
</button>
</div>
</div>
</div>
<!-- End Post 3 -->
</div>
</div>
</div>
Related Components
Timeline Component
A responsive timeline component with dark mode support and microinteractions using Tailwind CSS. No JavaScript required.
Timeline Component
Responsive Timeline Component with Skeuomorphic design, Analogous color scheme, Moderate complexity for Blog/Content websites with Dark Theme support. No JavaScript needed, uses Tailwind CSS with dark mode support. Images from picsum.photos and avatars from randomuser.me are used.
Timeline Component
A Minimalist/Flat Design timeline component for showcasing work or products in a portfolio, designed with responsiveness and dark mode support using Tailwind CSS.