ActivityFeedComponent
A simple retro/vintage-styled activity feed component designed for blog content consumption, featuring a monochromatic blue color scheme and responsive dark mode support using Tailwind CSS.
HTML Code
<!-- Activity Feed Component: Retro/Vintage Monochromatic Style -->
<section aria-labelledby="activity-feed-title" class="bg-blue-50 dark:bg-blue-900 border-2 border-dashed border-blue-300 dark:border-blue-700 rounded-lg shadow p-6 max-w-md md:max-w-lg lg:max-w-xl mx-auto">
<h2 id="activity-feed-title" class="uppercase tracking-widest text-2xl font-mono text-blue-900 dark:text-blue-100 pb-2 mb-4 border-b-2 border-dashed border-blue-300 dark:border-blue-700">
Activity Feed
</h2>
<div class="divide-y divide-blue-200 dark:divide-blue-700">
<div class="flex items-center space-x-4 py-3">
<img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice avatar">
<div class="flex-1 min-w-0">
<p class="text-sm font-mono text-blue-800 dark:text-blue-200">
<span class="font-bold">Alice</span> published a new post <a href="#" class="underline">Understanding Tailwind CSS</a>
</p>
<p class="text-xs text-blue-600 dark:text-blue-400">2 hours ago</p>
</div>
</div>
<div class="flex items-center space-x-4 py-3">
<img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/65.jpg" alt="Bob avatar">
<div class="flex-1 min-w-0">
<p class="text-sm font-mono text-blue-800 dark:text-blue-200">
<span class="font-bold">Bob</span> commented on <a href="#" class="underline">10 CSS Tricks You Should Know</a>
</p>
<p class="text-xs text-blue-600 dark:text-blue-400">5 hours ago</p>
</div>
</div>
<div class="flex items-center space-x-4 py-3">
<img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Carol avatar">
<div class="flex-1 min-w-0">
<p class="text-sm font-mono text-blue-800 dark:text-blue-200">
<span class="font-bold">Carol</span> liked the post <a href="#" class="underline">Building Responsive Layouts</a>
</p>
<p class="text-xs text-blue-600 dark:text-blue-400">1 day ago</p>
</div>
</div>
<div class="flex items-center space-x-4 py-3">
<img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Dave avatar">
<div class="flex-1 min-w-0">
<p class="text-sm font-mono text-blue-800 dark:text-blue-200">
<span class="font-bold">Dave</span> published a new post <a href="#" class="underline">A Retro Design Revival</a>
</p>
<p class="text-xs text-blue-600 dark:text-blue-400">2 days ago</p>
</div>
</div>
</div>
</section>Related Components
Activity Feed Component
A complex 3D-inspired activity feed component for real estate platforms, featuring earth tones, responsive design, and dark mode support. Displays various property-related activities.
Activity Feed Component
A responsive activity feed component designed in a paper/print-inspired style with sepia/brown tones, suitable for forums and community platforms. Includes dark mode support.
Activity Feed Component
A Retro/Vintage styled activity feed component for showcasing work or products. The design features an analogous color scheme with support for dark theme. The component is interactive and responsive, suitable for portfolio use.