Componenti Notifiche di tipo avviso popup Componente Notifiche di tipo avviso popup

Componente Notifiche di tipo avviso popup

Componente di notifica di tipo avviso popup con stile Glassmorphism, combinazione di colori dei toni della terra e design reattivo con supporto della modalità oscura.

Anteprima

Codice HTML

<div class="fixed bottom-4 right-4 z-50">
  <!-- Toast 1 -->
  <div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
    <div class="flex-shrink-0">
      <img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar1/40/40" alt="Avatar">
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">John Doe</p>
      <p class="text-xs">New message received.</p>
    </div>
    <button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg class="w-4 h-4" 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"></path>
      </svg>
    </button>
  </div>

  <!-- Toast 2 -->
  <div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
    <div class="flex-shrink-0">
      <img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar2/40/40" alt="Avatar">
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">Jane Smith</p>
      <p class="text-xs">Your report is ready.</p>
    </div>
    <button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg class="w-4 h-4" 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"></path>
      </svg>
    </button>
  </div>

  <!-- Toast 3 -->
  <div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg p-4 flex items-center text-gray-800 dark:text-gray-200">
    <div class="flex-shrink-0">
      <img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar3/40/40" alt="Avatar">
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">System Update</p>
      <p class="text-xs">Security patch applied.</p>
    </div>
    <button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg class="w-4 h-4" 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"></path>
      </svg>
    </button>
  </div>
</div>

Componenti correlati

Componente Notifiche di tipo avviso popup

Un componente di notifiche Toast minimalista e vibrante che utilizza Tailwind CSS. Il componente è progettato con un layout semplice per i portfolio, supporta la modalità oscura ed è reattivo senza JavaScript.

Aperto

Componente Notifiche di tipo avviso popup

Un componente di notifica di tipo avviso popup neumorfico con colori pastello, design reattivo e supporto per temi scuri, adatto per blog e siti di contenuti.

Aperto

Notifiche di tipo avviso popup

Un componente di notifiche di tipo avviso popup reattivo e compatibile con il tema scuro per l'e-commerce con un design minimalista/piatto che utilizza una combinazione di colori complementari.

Aperto