Componenti Notifiche di tipo avviso popup Notifiche di tipo avviso popup retrò

Notifiche di tipo avviso popup retrò

Un componente reattivo per le notifiche di tipo avviso popup con design retrò/vintage, combinazione di colori triadica e supporto per la modalità oscura, costruito con Tailwind CSS per l'uso in portafoglio.

Anteprima

Codice HTML

<div class="fixed bottom-5 right-5 space-y-4">
  <!-- Success Toast -->
  <div class="bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Success!</div>
      <div class="text-sm">Item successfully added.</div>
    </div>
  </div>

  <!-- Info Toast -->
  <div class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Information</div>
      <div class="text-sm">Your request is being processed.</div>
    </div>
  </div>

  <!-- Warning Toast -->
  <div class="bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
    <div>
      <div class="font-bold">Warning!</div>
      <div class="text-sm">Some issues were found.</div>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Error!</div>
      <div class="text-sm">Action could not be completed.</div>
    </div>
  </div>
</div>

Componenti correlati

Componente Notifiche di tipo avviso popup

Un componente di notifiche di tipo avviso popup in stile brutalista che utilizza Tailwind CSS, progettato per un portfolio che mette in mostra lavori o prodotti. Il design incorpora una combinazione di colori analoga e supporta la modalità oscura con un'interfaccia complessa.

Aperto

Notifiche di tipo avviso popup

Componente Notifiche di tipo avviso popup con stile Glassmorphism, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS

Aperto

Componente Notifiche di tipo avviso popup

Un componente di notifica popup reattivo con design Skeuomorphic e supporto per la modalità oscura, costruito con Tailwind CSS.

Aperto