Componente Messaggi di successo
Componente Messaggi di successo con modalità oscura - Dispone di effetti reattivi e supporto per temi scuri. Non è necessario alcun codice JavaScript. Per la modalità scura, il supporto CSS è sufficiente.
Codice HTML
<div class="flex items-center justify-center h-screen bg-zinc-950">
<div class="relative px-4 py-3 pr-10 text-teal-500 bg-teal-900 rounded-lg shadow-md" role="alert">
<strong class="font-bold select-none">Success!</strong>
<span class="block sm:inline select-none">Your action was successful.</span>
<span class="absolute top-0 bottom-0 right-0 flex items-center px-4 py-3">
<svg class="w-6 h-6 fill-current" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<title>Close</title>
<path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15L6.342 6.342a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
</svg>
</span>
</div>
</div>Componenti correlati
Messaggio di successo Art Déco
Un componente di messaggio di successo ispirato all'Art Déco con una tavolozza di colori retrò/vintage, progettato per piattaforme di intrattenimento/multimediali. Presenta motivi geometrici, uno stile lussuoso ed è completamente reattivo con il supporto della modalità oscura.
Componente Messaggi di successo
Componente Responsive Success Messages con supporto Dark Mode e Glassmorphism Style per l'e-commerce.
Skeuomorphic_Retro_Success_Message_Component
Un componente del messaggio di successo di moderata complessità progettato con uno stile scheumorfico, retrò/vintage, adatto ai marchi di moda/bellezza. Include un design reattivo e il supporto per la modalità scura.