Componentes Fuente de actividades Componente de fuente de actividad

Componente de fuente de actividad

Componente de alimentación de actividades con estética retro / vintage de los años 80 / 90, combinación de colores monocromática, complejidad moderada para el consumo de blog / contenido. Diseño responsivo con soporte para modo oscuro usando Tailwind CSS. Imágenes de picsum.photos y avatares de randomuser.me.

Vista previa

Código HTML

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

Componentes relacionados

ActivityFeedComponent

Un componente de feed de actividades simple de estilo retro / vintage diseñado para el consumo de contenido de blog, con un esquema de color azul monocromático y soporte de modo oscuro receptivo usando Tailwind CSS.

Abrir