Componente Notifiche di tipo avviso popup per il neumorfismo
Componente Notifiche di tipo avviso popup per il neumorfismo con effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="flex items-center justify-center min-h-screen p-10">
<div class="w-full max-w-sm mx-auto">
<div class="flex items-center p-6 neumorphism-card rounded-xl">
<div class="flex-shrink-0">
<svg class="w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</div>
<div class="ml-4">
<p class="font-semibold text-gray-700 dark:text-gray-200">Success!</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your action was completed successfully.</p>
</div>
</div>
<!-- Add more toast notifications as needed -->
</div>
</div>
<style>
/* Base styles for neumorphism effect */
.neumorphism-card {
background: linear-gradient(145deg, #e0e0e0, #ffffff);
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
.neumorphism-card {
background: linear-gradient(145deg, #2c2c2c, #383838);
box-shadow: 8px 8px 16px #232323, -8px -8px 16px #383838;
}
}
/* Responsive adjustments */
@media (max-width: 600px) {
.neumorphism-card {
padding: 1rem;
}
}
</style>
Componenti correlati
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.
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 toast Brutalism
Un set di notifiche toast di ispirazione brutalista con una combinazione di colori neutri caldi, adatta per i sistemi di prenotazione. Presenta contrasti grezzi e audaci e un design reattivo con supporto per la modalità scura.