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.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Activity Feed</h2>
<div class="space-y-4">
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-300">Published a new project: <a href="#" class="text-blue-500 dark:text-blue-300 underline">Retro Aesthetic App</a>.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-300">Shared a new blog post: <a href="#" class="text-blue-500 dark:text-blue-300 underline">Top 10 Vintage Designs</a>.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
<img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h3>
<p class="text-gray-600 dark:text-gray-300">Created a new collection: <a href="#" class="text-blue-500 dark:text-blue-300 underline">90s Nostalgia Gallery</a>.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
<img src="https://randomuser.me/api/portraits/women/34.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h3>
<p class="text-gray-600 dark:text-gray-300">Updated her portfolio: <a href="#" class="text-blue-500 dark:text-blue-300 underline">My Retro Journey</a>.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">8 hours ago</span>
</div>
</div>
</div>
</div>Related Components
Brutalist Monochromatic Activity Feed
A simple, brutalist-inspired activity feed component with a monochromatic color scheme, suitable for business/corporate websites. Features high contrast, bold typography, and full responsiveness with dark mode support.
Activity Feed Component
Activity Feed Component with Material Design, Grayscale color scheme, Moderate complexity, and dark mode support
Activity Feed Component
A responsive activity feed component designed in a 3D style with dark theme support, incorporating three-dimensional elements for depth and engagement.