Componente Messaggi di successo
Un componente semplice e pulito per i messaggi di successo con design reattivo e supporto per la modalità oscura.
Codice HTML
<div class="flex items-center justify-between p-4 text-green-700 bg-green-100 rounded-lg dark:bg-green-700 dark:text-green-100" role="alert">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<p class="font-bold">Success!</p>
<p class="ml-2 text-sm">Your action was successful.</p>
</div>
<button type="button" class="text-green-700 hover:text-green-900 dark:text-green-100 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>Componenti correlati
Componente Messaggi di successo
Un componente che mostra messaggi di successo audaci con uno stile di design brutale, con contrasto elevato, effetti reattivi e supporto per temi scuri.
Componente Messaggi di successo
Un componente reattivo per i messaggi di successo progettato per la modalità scura con una combinazione di colori vivaci, ideale per mostrare il lavoro in un portfolio.
Componente Messaggi di successo
Un componente Messaggi di successo progettato in modalità oscura per la lettura di blog/contenuti. Presenta una combinazione di colori analoga ed è reattivo.