Componente Notifiche di tipo avviso popup
Un componente di notifica di tipo avviso popup pulito e minimalista in stile tipografia svizzero/internazionale, combinazione di colori viola/viola, progettato per i sistemi di prenotazione. Completamente reattivo con supporto per la modalità oscura.
Codice HTML
<div class="fixed inset-x-0 bottom-4 z-50 flex flex-col items-center justify-center space-y-3 px-4 sm:items-end sm:px-6">
<!-- Success Notification -->
<div class="shadow-lg dark:shadow-purple-900/50 w-full max-w-sm rounded-lg bg-white p-4 transition-all duration-300 ease-out dark:bg-gray-800 sm:max-w-md md:p-5">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-purple-600 dark:text-purple-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 md:text-base">Booking Confirmed!</p>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400 md:text-sm">Your appointment for 'Dental Check-up' on Nov 15th at 10:00 AM has been successfully reserved.</p>
<div class="mt-3 flex space-x-2">
<button type="button" class="inline-flex items-center rounded-md border border-transparent bg-purple-100 px-2.5 py-1.5 text-xs font-medium text-purple-800 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-purple-700 dark:text-purple-100 dark:hover:bg-purple-600 dark:focus:ring-offset-gray-800">
View Details
</button>
<button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
Dismiss
</button>
</div>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-offset-gray-800">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
<!-- Error/Warning Notification -->
<div class="shadow-lg dark:shadow-purple-900/50 w-full max-w-sm rounded-lg bg-white p-4 transition-all duration-300 ease-out dark:bg-gray-800 sm:max-w-md md:p-5">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-red-600 dark:text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.174 3.35 1.9 3.35h13.713c1.726 0 2.76-1.85 1.9-3.35L13.743 3.373c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 md:text-base">Booking Failed</p>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400 md:text-sm">The selected time slot for 'Haircut' on Dec 1st at 3:00 PM is no longer available. Please choose another time.</p>
<div class="mt-3 flex space-x-2">
<button type="button" class="inline-flex items-center rounded-md border border-transparent bg-purple-100 px-2.5 py-1.5 text-xs font-medium text-purple-800 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-purple-700 dark:text-purple-100 dark:hover:bg-purple-600 dark:focus:ring-offset-gray-800">
Browse Slots
</button>
<button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
Dismiss
</button>
</div>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-offset-gray-800">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
</div>Componenti correlati
Notifiche di tipo avviso popup pastello skeuomorfo
Un componente di notifica di tipo avviso popup complesso, scheumorfico e a tema pastello per piattaforme di intrattenimento/multimediali, con più tipi di notifica con supporto della modalità scura e design reattivo.
Componente Notifiche di tipo avviso popup
Un componente reattivo per le notifiche di tipo avviso popup progettato con Glassmorphism, con una combinazione di colori monocromatica, supporto per la modalità oscura e pronto per l'uso in un portfolio.
Componente Notifiche di tipo avviso popup
Un componente Notifiche Toast reattivo con stile Glassmorphism e combinazione di colori vivaci, adatto per applicazioni di e-commerce. Supporta il tema scuro e ha un'interfaccia complessa con più elementi interattivi.