Activity Feed

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.

Open Preview

                <!-- 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>

Activity Feed Component with Retro/Vintage 80s/90s aesthetics, monochromatic color scheme, moderate complexity for blog/content consumption. Responsive design with dark mode support using Tailwind CSS. Images from picsum.photos and avatars from randomuser.me.

Open Preview

                <div class="container mx-auto px-4 py-8 bg-gray-200 dark:bg-gray-800">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Activity Feed</h2>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">posted a new article</p>
      </div>
    </div>
    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">The Future of Web Development</h3>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>2 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
    </div>
  </div>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">Jane Smith</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">commented on a post</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Great insightful article, John! I learned a lot.</p>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>4 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View post</a>
    </div>
  </div>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">Peter Jones</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">liked an article</p>
      </div>
    </div>
    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">10 Tips for Better Productivity</h3>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>6 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View article</a>
    </div>
  </div>
</div>

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.

Open Preview

                <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>

Activity Feed Component

Activity Feed Component with Glassmorphism style, Vibrant color scheme, Moderate complexity, and responsive dark theme support.

Open Preview

                <div class="relative antialiased px-4 dark:bg-gray-900 min-h-screen">
    <div class="max-w-xl mx-auto">
        <div class="relative">
            <span class="absolute top-0 left-2/4 -ml-px h-full" aria-hidden="true">
                <span class="w-0.5 h-full bg-gray-300 block dark:bg-gray-700"></span>
            </span>

            <ul class="relative">
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-500 flex-shrink-0 shadow">
                            <svg class="w-6 h-6 text-white" 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.004 9.004 0 01-4.964-1.484L3 20l1.395-3.493A8.968 8.968 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-indigo-500 dark:text-white">Alex Shatov</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">1hr ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Preached to the choir about the importance of having a plan.</div>
                        </div>
                    </div>
                </li>
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-pink-500 flex-shrink-0 shadow">
                            <svg class="w-6 h-6 text-white" 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6H4m6 6H4m6 0v2m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6h2m-2 0h2m0 6h2m0-6v2"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500 dark:text-white">Mark Cameron</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">2hr ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Discussed the benefits of a healthy diet and exercise.</div>
                        </div>
                    </div>
                </li>
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-teal-500 flex-shrink-0 shadow animate-pulse">
                            <svg class="w-6 h-6 text-white" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-teal-500 dark:text-white">Drew Berry</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">10hr ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Is working on a new project.</div>
                        </div>
                    </div>
                </li>
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-fuchsia-500 flex-shrink-0 shadow">
                            <svg class="w-6 h-6 text-white" 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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-fuchsia-500 dark:text-white">Danielle Price</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">1 day ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Completed the quarterly report.</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Activity Feed Component

Responsive Activity Feed Component for Blog/Content with Simple 3D Design, Pastel Color Scheme, Dark Theme Support, and Tailwind CSS.

Open Preview

                <section class="bg-gray-100 dark:bg-gray-900 py-8 lg:py-16 antialiased">
  <div class="max-w-2xl mx-auto px-4">
    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Activity Feed</h2>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg mb-6 relative">
      <div class="absolute inset-0 border-2 border-indigo-300 dark:border-indigo-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">John Doe posted a new article</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">Read more</a>
    </article>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg mb-6 relative">
        <div class="absolute inset-0 border-2 border-pink-300 dark:border-pink-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">Jane Smith commented on a post</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">View comment</a>
    </article>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg relative">
        <div class="absolute inset-0 border-2 border-teal-300 dark:border-teal-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">Peter Jones liked an article</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">View article</a>
    </article>

  </div>
</section>

Activity Feed Component

Minimalist/Flat Design Activity Feed for E-commerce, Monochromatic, Simple, Responsive, Dark Theme

Open Preview

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Activity Feed</h3>
  <ul class="divide-y divide-gray-200 dark:divide-gray-700">
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">John Doe</span> placed an order.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">2 hours ago</span>
    </li>
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">Jane Smith</span> reviewed a product.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">5 hours ago</span>
    </li>
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">Robert Brown</span> added item to cart.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">10 hours ago</span>
    </li>
  </ul>
</div>

Activity Feed Component

A retro/vintage styled activity feed component designed for showcasing work or products with high-saturation colors, interactive elements, and dark mode support.

Open Preview

                <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-center text-violet-600 dark:text-violet-300 mb-6">Activity Feed</h2>
    <div class="space-y-4">
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-violet-600 dark:border-violet-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Added a new project: <span class="text-violet-600 dark:text-violet-300">Awesome Website</span></p>
                <p class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-600 dark:border-green-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Uploaded a new image.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">1 day ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-600 dark:border-blue-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Emily Carter</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your post.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">3 days ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-600 dark:border-red-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Sarah Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">4 days ago</p>
            </div>
        </div>
    </div>
    <button class="mt-6 w-full py-2 px-4 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg shadow focus:outline-none transition duration-200 dark:bg-violet-300 dark:hover:bg-violet-200">Load More</button>
</div>

Activity Feed Component

A complex activity feed component designed to showcase blog content with multiple interactive elements. Incorporates a 3D design style and a complementary color scheme. Supports responsive design and dark theme.

Open Preview

                <div class="max-w-2xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Activity Feed</h2>
    <div class="space-y-6">
        <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-green-500">
            <div class="flex items-center space-x-4 mb-2">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">John Doe</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted 2 hours ago</p>
                </div>
            </div>
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Exploring Tailwind CSS</h4>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Join me as we dive into the world of Tailwind CSS, a utility-first CSS framework.</p>
            <img src="https://picsum.photos/400/200?random=1" alt="Feed Image" class="w-full rounded-lg mb-2">
            <div class="flex justify-between text-gray-500 dark:text-gray-400">
                <button class="hover:text-green-500">Like</button>
                <button class="hover:text-green-500">Comment</button>
            </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-blue-500">
            <div class="flex items-center space-x-4 mb-2">
                <img src="https://randomuser.me/api/portraits/women/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted 3 hours ago</p>
                </div>
            </div>
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Understanding CSS Grid</h4>
            <p class="text-gray-700 dark:text-gray-300 mb-2">CSS Grid is an amazing layout system that allows for two-dimensional layouts.</p>
            <img src="https://picsum.photos/400/200?random=2" alt="Feed Image" class="w-full rounded-lg mb-2">
            <div class="flex justify-between text-gray-500 dark:text-gray-400">
                <button class="hover:text-blue-500">Like</button>
                <button class="hover:text-blue-500">Comment</button>
            </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-red-500">
            <div class="flex items-center space-x-4 mb-2">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">Mark Johnson</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted 4 hours ago</p>
                </div>
            </div>
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Responsive Design Basics</h4>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Learn the fundamental principles of creating responsive web designs.</p>
            <img src="https://picsum.photos/400/200?random=3" alt="Feed Image" class="w-full rounded-lg mb-2">
            <div class="flex justify-between text-gray-500 dark:text-gray-400">
                <button class="hover:text-red-500">Like</button>
                <button class="hover:text-red-500">Comment</button>
            </div>
        </div>
    </div>
</div>

Activity Feed Component

An activity feed component with Neumorphism design, earth tone color scheme, complex layout, responsive design, and dark theme support.

Open Preview

                <div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 min-h-screen">

  <!-- Light Mode Neumorphism styles -->
  <style>
    .neumorphic-light {
      border-radius: 1rem;
      background: #e0e0e0;
      box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff;
    }

    .neumorphic-light-inset {
      border-radius: 1rem;
      background: #e0e0e0;
      box-shadow: inset 8px 8px 15px #bebebe, inset -8px -8px 15px #ffffff;
    }
  </style>

  <!-- Dark Mode Neumorphism styles -->
  <style>
    @media (prefers-color-scheme: dark) {
      .dark .neumorphic-dark {
        border-radius: 1rem;
        background: #2d3748;
        box-shadow: 8px 8px 15px #1a202c, -8px -8px 15px #454f6a;
      }

      .dark .neumorphic-dark-inset {
        border-radius: 1rem;
        background: #2d3748;
        box-shadow: inset 8px 8px 15px #1a202c, inset -8px -8px 15px #454f6a;
      }
    }
  </style>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

    <!-- Left Sidebar (User Profile / Filters) -->
    <div class="md:col-span-1 p-6 neumorphic-light dark:neumorphic-dark">
      <div class="flex flex-col items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-24 h-24 mb-4 neumorphic-light-inset dark:neumorphic-dark-inset">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Blogger & Content Creator</p>
      </div>

      <div class="mt-8">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">All Activity</a></li>
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Comments</a></li>
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Likes</a></li>
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">New Posts</a></li>
        </ul>
      </div>
    </div>

    <!-- Main Activity Feed -->
    <div class="md:col-span-2 space-y-6">

      <!-- Activity Card Example 1 -->
      <div class="p-6 neumorphic-light dark:neumorphic-dark">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith <span class="font-normal text-gray-600 dark:text-gray-400">commented on</span> "Exploring the Wilds"</p>
            <span class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</span>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">"Great post! I really enjoyed reading about your adventure."</p>
        <div class="flex justify-end space-x-4">
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Reply</button>
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Like</button>
        </div>
      </div>

      <!-- Activity Card Example 2 -->
      <div class="p-6 neumorphic-light dark:neumorphic-dark">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Peter Jones <span class="font-normal text-gray-600 dark:text-gray-400">liked</span> "The Art of Minimalism"</p>
            <span class="text-sm text-gray-600 dark:text-gray-400">5 hours ago</span>
          </div>
        </div>
        <div class="flex justify-end space-x-4">
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Undo Like</button>
        </div>
      </div>

      <!-- Activity Card Example 3 (New Post) -->
      <div class="p-6 neumorphic-light dark:neumorphic-dark">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Emily Davis <span class="font-normal text-gray-600 dark:text-gray-400">published a new post</span> "My Journey in Photography"</p>
            <span class="text-sm text-gray-600 dark:text-gray-400">1 day ago</span>
          </div>
        </div>
        <div class="neumorphic-light dark:neumorphic-dark p-4 rounded-md mb-4">
            <img src="https://picsum.photos/seed/photography/400/200" alt="Post Image" class="rounded-md mb-4 neumorphic-light-inset dark:neumorphic-dark-inset">
            <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">My Journey in Photography</h4>
            <p class="text-gray-700 dark:text-gray-300 line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>

        <div class="flex justify-end space-x-4">
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Read Post</button>
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Comment</button>
        </div>
      </div>

    </div>

  </div>
</div>

Activity Feed Component

A complex activity feed component for e-commerce with microinteractions and a dark theme, styled using Tailwind CSS.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=3" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-400">Just purchased a new phone!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">5 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=5" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
                    <p class="text-gray-600 dark:text-gray-400">Left a review for "Wireless Headphones"!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">10 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=7" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
                    <p class="text-gray-600 dark:text-gray-400">Started following you!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">15 minutes ago</p>
                </div>
            </div>
        </div>
    </div>
</div>

Categories