Componentes de búsqueda

Categorías

Componentes Notificaciones

Notificaciones

Pequeños widgets que alertan a los usuarios sobre la información

Componente de notificaciones

Un componente de notificaciones neumórficas con un esquema de color en escala de grises y complejidad moderada, diseñado para el consumo de blogs/contenido. Es responsivo y admite temas oscuros.

Abrir Vista previa

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 flex items-center justify-center p-4">
  <div class="w-full max-w-sm mx-auto bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Notifications</h2>
    
    <div class="space-y-4">
      <!-- Notification 1 -->
      <div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1025/200/200" alt="User Avatar">
        <div>
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>

      <!-- Notification 2 -->
      <div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1011/200/200" alt="User Avatar">
        <div>
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">New article published: "The Future of AI".</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">1 day ago</p>
        </div>
      </div>

      <!-- Notification 3 -->
      <div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1005/200/200" alt="User Avatar">
        <div>
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Your subscription is expiring soon.</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">3 days ago</p>
        </div>
      </div>
    </div>
    
    <div class="mt-6 text-center">
      <a href="#" class="inline-block px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 rounded-full shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-inset-light dark:hover:shadow-neumorphic-button-inset-dark transition-all duration-300">
        View All Notifications
      </a>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #1f1f1f, -6px -6px 12px #3c3c3c;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #3c3c3c;
  }
  .shadow-neumorphic-button-light {
    box-shadow: 4px 4px 8px #b0b0b0, -4px -4px 8px #ffffff;
  }
  .dark .shadow-neumorphic-button-dark {
    box-shadow: 4px 4px 8px #1f1f1f, -4px -4px 8px #3c3c3c;
  }
  .hover\:shadow-neumorphic-button-inset-light:hover {
    box-shadow: inset 4px 4px 8px #b0b0b0, inset -4px -4px 8px #ffffff;
  }
  .dark .hover\:shadow-neumorphic-button-inset-dark:hover {
    box-shadow: inset 4px 4px 8px #1f1f1f, inset -4px -4px 8px #3c3c3c;
  }
</style>

Componente de notificaciones

Un componente de notificaciones simple y receptivo para comercio electrónico, con elementos de diseño 3D y una combinación de colores en tonos tierra. Soporta el modo oscuro.

Abrir Vista previa

                <div class="p-4 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center">
  <div class="max-w-md w-full bg-white dark:bg-stone-700 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105">
    <div class="p-6 md:p-8 border-b-2 border-stone-200 dark:border-stone-600">
      <h2 class="text-2xl md:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2 drop-shadow-md">Notifications</h2>
      <p class="text-stone-600 dark:text-stone-300">Stay updated on your recent e-commerce activities.</p>
    </div>
    <div class="divide-y divide-stone-200 dark:divide-stone-600">
      
      <!-- Notification Item 1 -->
      <div class="p-4 md:p-6 flex items-start space-x-4 animate-fade-in-down">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shadow-lg transform -rotate-6 transition-all duration-300 hover:rotate-0">
          <img class="w-full h-full object-cover" src="https://picsum.photos/seed/product1/50/50" alt="Product Image">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-400 to-orange-500 opacity-60"></div>
        </div>
        <div class="flex-1">
          <p class="text-stone-800 dark:text-stone-100 font-semibold">Order Delivered!</p>
          <p class="text-sm text-stone-600 dark:text-stone-300 mt-1">Your recent order <span class="font-mono text-xs bg-stone-200 dark:bg-stone-600 px-2 py-1 rounded">#12345</span> has been delivered successfully.</p>
          <span class="text-xs text-stone-500 dark:text-stone-400 mt-2 block">2 hours ago</span>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="p-4 md:p-6 flex items-start space-x-4 animate-fade-in-down animation-delay-200">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shadow-lg transform rotate-3 transition-all duration-300 hover:rotate-0">
          <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-emerald-500 opacity-60"></div>
        </div>
        <div class="flex-1">
          <p class="text-stone-800 dark:text-stone-100 font-semibold">New Message from Seller</p>
          <p class="text-sm text-stone-600 dark:text-stone-300 mt-1">"Thank you for your purchase! Let us know if you have any questions."</p>
          <span class="text-xs text-stone-500 dark:text-stone-400 mt-2 block">1 day ago</span>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="p-4 md:p-6 flex items-start space-x-4 animate-fade-in-down animation-delay-400">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shadow-lg transform -rotate-3 transition-all duration-300 hover:rotate-0">
          <img class="w-full h-full object-cover" src="https://picsum.photos/seed/promotion/50/50" alt="Promotion Icon">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-indigo-500 opacity-60"></div>
        </div>
        <div class="flex-1">
          <p class="text-stone-800 dark:text-stone-100 font-semibold">Limited Time Offer!</p>
          <p class="text-sm text-stone-600 dark:text-stone-300 mt-1">Get <span class="font-extrabold text-lime-600 dark:text-lime-400">20% off</span> on all natural wood items. Shop now!</p>
          <span class="text-xs text-stone-500 dark:text-stone-400 mt-2 block">3 days ago</span>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-down {
  animation: fade-in-down 0.5s ease-out forwards;
}
.animation-delay-200 {
  animation-delay: 0.2s;
}
.animation-delay-400 {
  animation-delay: 0.4s;
}
</style>

Componente de notificaciones

Un componente de notificaciones receptivo con diseño 3D, diseño simple en escala de grises y soporte de tema oscuro, adecuado para sitios web comerciales.

Abrir Vista previa

                <div class="dark:bg-gray-900 bg-gray-100 p-6 rounded-lg shadow-lg relative overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 opacity-20 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900"></div>
  <div class="relative z-10">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Notifications</h2>
    <div class="space-y-4">
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">New message received.</p>
        </div>
      </div>
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
        </div>
      </div>
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Commented on your photo.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Un componente de notificaciones simple y receptivo con soporte para modo oscuro, diseñado en un estilo Skeuomorphic con un esquema de color en escala de grises. Ideal para un portafolio para mostrar habilidades de diseño mínimas.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform duration-300 hover:scale-105">
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 flex items-center justify-between">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Notifications</h3>
      <span class="text-sm text-gray-500 dark:text-gray-400">3 New</span>
    </div>
    <div class="p-4 space-y-4">

      <!-- Notification Item 1 -->
      <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith liked your photo.</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">You have a new message from Bob Johnson.</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
        </div>
      </div>

    </div>
    <div class="px-6 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-right">
      <a href="#" class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transform duration-200 hover:underline">View All Notifications</a>
    </div>
  </div>
</div>

Componente de notificaciones

Un componente de notificaciones receptivo con estilo Material Design, combinación de colores complementaria y compatibilidad con el modo oscuro, creado con Tailwind CSS para un propósito.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:max-w-xl">
    <div class="md:flex">
      <div class="w-full p-6">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Notifications</h2>
          <span class="px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">3 New</span>
        </div>

        <!-- Notification Item 1 -->
        <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <div class="flex-shrink-0">
            <img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          </div>
          <div class="ml-4 flex-1">
            <div class="flex justify-between items-center">
              <p class="text-md font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
              <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">Commented on your post "Understanding Material Design principles".</p>
          </div>
        </div>

        <!-- Notification Item 2 -->
        <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <div class="flex-shrink-0">
            <img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          </div>
          <div class="ml-4 flex-1">
            <div class="flex justify-between items-center">
              <p class="text-md font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
              <span class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">Liked your recent dashboard design concept.</p>
          </div>
        </div>

        <!-- Notification Item 3 (New) -->
        <div class="flex items-center p-4 border-b border-rose-300 bg-rose-50 dark:bg-rose-900 dark:border-rose-700 hover:bg-rose-100 dark:hover:bg-rose-800 transition duration-150 ease-in-out relative">
          <div class="absolute top-2 right-2 px-2 py-1 text-xs font-semibold text-rose-800 bg-rose-200 rounded-full dark:bg-rose-700 dark:text-rose-100">New</div>
          <div class="flex-shrink-0">
            <img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
          </div>
          <div class="ml-4 flex-1">
            <div class="flex justify-between items-center">
              <p class="text-md font-semibold text-gray-900 dark:text-gray-100">Robert Johnson</p>
              <span class="text-sm text-gray-500 dark:text-gray-400">10 hours ago</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">Shared your data visualization dashboard template with 5 people.</p>
          </div>
        </div>

        <!-- Notification Item 4 -->
        <div class="flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <div class="flex-shrink-0">
            <img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/women/55.jpg" alt="User Avatar">
          </div>
          <div class="ml-4 flex-1">
            <div class="flex justify-between items-center">
              <p class="text-md font-semibold text-gray-900 dark:text-gray-100">Emily White</p>
              <span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">Started following your dashboard updates.</p>
          </div>
        </div>

        <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 text-center">
          <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-200 font-semibold transition duration-150 ease-in-out">View All Notifications</a>
        </div>
      </div>
    </div>
  </div>
</div>

Componente de notificaciones

Un componente de notificaciones con un diseño de cristal con un esquema de color monocromático, adaptado para aplicaciones web empresariales/corporativas. El componente incluye varios elementos interactivos y es compatible con el modo oscuro.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center p-8 bg-gray-900 text-white min-h-screen">
    <div class="bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-2xl font-bold mb-4">Notifications</h2>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">John Doe</p>
                <p class="text-sm">You have a meeting scheduled at 3 PM.</p>
                <span class="text-xs text-gray-400">10 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Jane Smith</p>
                <p class="text-sm">Your invoice has been paid.</p>
                <span class="text-xs text-gray-400">15 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Mike Johnson</p>
                <p class="text-sm">New comment on your post.</p>
                <span class="text-xs text-gray-400">30 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/women/14.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Emily Davis</p>
                <p class="text-sm">Project deadline is approaching.</p>
                <span class="text-xs text-gray-400">1 hour ago</span>
            </div>
        </div>
        <div class="mt-4 text-center">
            <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                View All Notifications
            </button>
        </div>
    </div>
</div>

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

                <div class="relative min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-700 p-8 flex items-center justify-center font-sans">

  <!-- Skeuomorphic Notification Container -->
  <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-600 rounded-3xl shadow-2xl p-6 md:p-10 w-full max-w-lg
              border-t border-l border-gray-50 dark:border-gray-700
              border-b border-r border-gray-400 dark:border-gray-900
              transform transition-all duration-300 hover:scale-105">

    <!-- Header -->
    <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-300 dark:border-gray-500">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 drop-shadow-md tracking-wide">Notifications</h2>
      <div class="relative">
        <button class="w-12 h-12 rounded-full bg-gradient-to-br from-rose-500 to-rose-700 dark:from-rose-700 dark:to-rose-900 p-1
                       shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200
                       focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-600
                       flex items-center justify-center">
          <span class="text-white text-xl font-bold">5</span>
        </button>
        <span class="absolute top-0 right-0 block h-4 w-4 bg-lime-400 dark:bg-lime-600 rounded-full ring-2 ring-white dark:ring-gray-800 animate-pulse"></span>
      </div>
    </div>

    <!-- Notification List -->
    <div class="space-y-6 max-h-96 overflow-y-auto pr-2 custom-scrollbar">

      <!-- Notification Item 1: New Order -->
      <div class="flex items-center bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl shadow-md
                  border-t border-l border-gray-100 dark:border-gray-600
                  border-b border-r border-gray-300 dark:border-gray-900
                  transform transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
        <div class="flex-shrink-0 w-14 h-14 rounded-full bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800
                    flex items-center justify-center shadow-inner-lg shadow-green-500/50 dark:shadow-green-900/50 mr-4">
          <svg class="w-7 h-7 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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 6m-4 3l4 2m-4 2l4 2m-4 2l4 2M3 6l4 2m-4 6l4 2m-4 2l4 2M12 18h.01"></path></svg>
        </div>
        <div class="flex-grow">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Order Placed!</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Order #12345 for $120.00 has been confirmed.</p>
          <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">2 minutes ago</p>
        </div>
      </div>

      <!-- Notification Item 2: Product Restock -->
      <div class="flex items-center bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl shadow-md
                  border-t border-l border-gray-100 dark:border-gray-600
                  border-b border-r border-gray-300 dark:border-gray-900
                  transform transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
        <div class="flex-shrink-0 w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800
                    flex items-center justify-center shadow-inner-lg shadow-blue-500/50 dark:shadow-blue-900/50 mr-4">
          <svg class="w-7 h-7 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
        </div>
        <div class="flex-grow">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Restocked!</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Your favorite

Componente de notificaciones

Componente de Notificaciones Brutalista con tonos Tierra para Portfolio

Abrir Vista previa

                
    <div class="relative min-h-screen bg-stone-100 dark:bg-stone-900 font-mono p-8">

        <!-- Notifications Container -->
        <div class="max-w-4xl mx-auto border-4 border-stone-900 dark:border-stone-100 bg-stone-300 dark:bg-stone-800 shadow-[10px_10px_0_0_#000] dark:shadow-[10px_10px_0_0_#E0E0E0] p-6 md:p-10">

            <div class="flex justify-between items-center mb-8 pb-4 border-b-4 border-stone-900 dark:border-stone-100">
                <h1 class="text-3xl md:text-5xl font-extrabold text-stone-900 dark:text-stone-100 uppercase tracking-tighter">
                    Inbox (4)
                </h1>
                <div class="relative">
                    <select class="block appearance-none bg-stone-900 dark:bg-stone-100 text-stone-100 dark:text-stone-900 py-3 px-6 pr-8 rounded-none leading-tight focus:outline-none focus:bg-stone-700 dark:focus:bg-stone-300 focus:border-stone-700 dark:focus:border-stone-300 border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0_0_#5D4037] dark:shadow-[4px_4px_0_0_#A1887F]">
                        <option>Filter By</option>
                        <option>All</option>
                        <option>Unread</option>
                        <option>Archived</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-stone-100 dark:text-stone-900">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
                    </div>
                </div>
            </div>

            <!-- Notification Item 1 -->
            <div class="mb-6 p-6 border-4 border-stone-900 dark:border-stone-100 bg-stone-200 dark:bg-stone-700 shadow-[8px_8px_0_0_#9E9D24] dark:shadow-[8px_8px_0_0_#DCE775] transition-all duration-300 hover:shadow-[12px_12px_0_0_#9E9D24] dark:hover:shadow-[12px_12px_0_0_#DCE775] relative">
                <div class="absolute -top-3 -right-3 bg-red-600 dark:bg-red-400 text-white dark:text-stone-900 text-xs px-3 py-1 font-bold">NEW</div>
                <div class="flex items-start mb-4">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-4 border-stone-900 dark:border-stone-100 mr-4 shadow-[4px_4px_0_0_#5D4037] dark:shadow-[4px_4px_0_0_#A1887F]">
                    <div>
                        <h3 class="text-xl md:text-2xl font-bold text-stone-800 dark:text-stone-200 mb-1">Project Updates - Critical!</h3>
                        <p class="text-stone-600 dark:text-stone-400 text-sm">From: John Doe <span class="ml-2 text-stone-500 dark:text-stone-500 text-xs">2 hours ago</span></p>
                    </div>
                </div>
                <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-4">
                    Hey team, urgent update on the

Componente de notificaciones

Componente de notificaciones responsivas con soporte de modo oscuro para el panel de control

Abrir Vista previa

                <div class="relative">
  <!-- Notifications Button -->
  <button class="relative flex items-center justify-center w-10 h-10 bg-blue-500 text-white rounded-full shadow-lg focus:outline-none dark:bg-blue-700">
    <svg class="w-6 h-6" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 01-6 0v-1m6 0H9"></path>
    </svg>
    <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full dark:bg-red-800">3</span>
  </button>

  <!-- Notifications Dropdown (Hidden by Default) -->
  <div class="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-xl overflow-hidden z-10 dark:bg-gray-800 dark:text-gray-200">
    <div class="py-2">

      <!-- Notification Item 1 -->
      <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <p class="text-sm">
          <span class="font-bold">John Doe</span> added a new report.
          <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
        </p>
      </a>

      <!-- Notification Item 2 -->
      <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <p class="text-sm">
          <span class="font-bold">Jane Smith</span> commented on your task.
          <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
        </p>
      </a>

      <!-- Notification Item 3 -->
      <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar">
        <p class="text-sm">
          <span class="font-bold">David Green</span> completed a project.
          <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">Yesterday</span>
        </p>
      </a>

    </div>

    <!-- View All Button -->
    <a href="#" class="block bg-gray-50 text-center font-bold py-3 text-blue-500 hover:underline dark:bg-gray-700 dark:text-blue-400">
      View All Notifications
    </a>
  </div>
</div>

Componente de notificaciones

Un componente de notificaciones diseñado con los principios de Material Design y un esquema de color monocromático para aplicaciones de comercio electrónico, con un diseño responsivo y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="fixed inset-0 z-50 flex items-end justify-center p-4 space-x-4 sm:items-start">
  <div class="w-full max-w-sm">
    <div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
      <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
          <h2 class="text-white text-lg font-semibold">New Message</h2>
          <p class="text-gray-300">You have a new message from a seller.</p>
        </div>
        <button class="text-gray-400 hover:text-gray-200">
          <svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12" /></svg>
        </button>
      </div>
      <img src="https://picsum.photos/200/100" alt="Product Image" class="rounded-md mt-2" />
      <div class="mt-2">
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">5 min ago</span>
      </div>
    </div>
  </div>
  <div class="w-full max-w-sm">
    <div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
      <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
          <h2 class="text-white text-lg font-semibold">Order Shipped</h2>
          <p class="text-gray-300">Your order #12345 has been shipped.</p>
        </div>
        <button class="text-gray-400 hover:text-gray-200">
          <svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12" /></svg>
        </button>
      </div>
      <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-md mt-2" />
      <div class="mt-2">
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">10 min ago</span>
      </div>
    </div>
  </div>
</div>