Componentes Notificaciones Componente de notificaciones

Componente de notificaciones

Componente de notificaciones responsivas con soporte de modo oscuro para interfaces de redes sociales, con un esquema de colores vibrantes.

Vista previa

Código HTML

<div class="p-4 bg-gray-900 dark:bg-black text-white rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4 text-teal-400">Notifications</h2>
  <div class="space-y-4">
    <div class="flex items-center border-b border-gray-700 pb-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-purple-400">John Doe</span> liked your post.</p>
      <span class="text-gray-500 text-sm">2 min ago</span>
    </div>
    <div class="flex items-center border-b border-gray-700 pb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-pink-400">Jane Smith</span> commented on your photo.</p>
      <span class="text-gray-500 text-sm">1 hour ago</span>
    </div>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-yellow-400">Peter Jones</span> started following you.</p>
      <span class="text-gray-500 text-sm">3 hours ago</span>
    </div>
  </div>
</div>

Componentes relacionados

Componente de notificaciones

Un componente de notificaciones responsivo con microinteracciones, combinación de colores triádica y compatibilidad con temas oscuros, diseñado para mostrar trabajos o productos.

Abrir

Componente de notificaciones

Un componente de notificaciones complejo y receptivo con elementos inspirados en la Bauhaus que utilizan neutros cálidos, adecuado para sitios de documentación o wiki, con soporte para modo oscuro.

Abrir

Componente de notificaciones

Un componente de notificaciones skeuomórfico para comercio electrónico con una combinación de colores vibrantes, una interfaz compleja, un diseño receptivo y compatibilidad con temas oscuros, creado con Tailwind CSS.

Abrir