Componentes Fuente de actividades Componente de fuente de actividad

Componente de fuente de actividad

Componente de alimentación de actividades con diseño de materiales, combinación de colores en escala de grises, complejidad moderada y compatibilidad con el modo oscuro

Vista previa

Código HTML

<div class="container mx-auto px-4 py-8 dark:bg-gray-900">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div>
          <p class="text-gray-800 dark:text-white font-semibold text-lg">John Doe</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Posted an update</p>
        </div>
      </div>
      <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-gray-500 dark:text-gray-400 text-sm">
        <span>2 hours ago</span>
        </div>
    </div>

      <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
        <div>
          <p class="text-gray-800 dark:text-white font-semibold text-lg">Jane Smith</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Commented on a post</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
        <span>4 hours ago</span>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
        <div>
          <p class="text-gray-800 dark:text-white font-semibold text-lg">Peter Jones</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Liked a post</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
       <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
        <span>6 hours ago</span>
       </div>
    </div>
  </div>
</div>

Componentes relacionados

Componente de fuente de actividad

Un componente de alimentación de actividades de estilo brutalista con diseño responsivo, diseños de alto contraste y compatibilidad con el modo oscuro mediante CSS de Tailwind.

Abrir

Componente de fuente de actividad

Un componente de alimentación de actividades receptivo con un estilo de diseño neumórfico, que admite temas claros y oscuros.

Abrir

Componente de fuente de actividad

Componente de alimentación de actividad receptivo para blog/contenido con diseño 3D simple, combinación de colores pastel, soporte para temas oscuros y CSS de viento de cola.

Abrir