Composant Message de Réussite - Conception Matérielle Complémentaire
Un composant de message de réussite de style Material Design pour un blog/site de contenu, utilisant une palette de couleurs complémentaire. Réactif avec prise en charge du thème sombre. Pas de JavaScript.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="max-w-sm w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<svg class="h-8 w-8 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-3">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Success!</h3>
</div>
</div>
<div class="mt-2">
<p class="text-sm text-gray-500 dark:text-gray-300">
Your action was completed successfully.
</p>
</div>
<div class="mt-4">
<button type="button" class="inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900 border border-transparent rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
Close
</button>
</div>
</div>
</div>Composants associés
Neumorphic_Charity_Success_Message
Un composant de message de réussite simple et réactif conçu avec un style neumorphique doux et une palette de couleurs monochromatiques, adapté aux organisations à but non lucratif et caritatives. Inclut la prise en charge du mode sombre.
Composant Messages de réussite
Un composant de message de réussite simple et propre avec un design réactif et une prise en charge du mode sombre.
Message de réussite de Memphis Pastel
Un composant de message de réussite simple et réactif avec une esthétique de design Memphis utilisant des couleurs pastel. Présente des formes géométriques ludiques et prend en charge le mode sombre.