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 di messaggio di successo complesso, reattivo e compatibile con il tema scuro per applicazioni di social media, caratterizzato da un vivace design 3D che utilizza Tailwind CSS. Include più elementi interattivi.
Componente Messaggi di successo
Componente Messaggi di Successo con design del Neumorfismo, supporto per temi reattivi e 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.