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
IndustrielDynamiqueGouvernementSuccèsMessage
Un composant de message de réussite conçu pour les services gouvernementaux/publics avec une esthétique industrielle, des couleurs vives et une prise en charge du mode sombre. Il présente un look brut et utilitaire avec des accents à haute saturation.
Composant Messages de réussite
Composant Messages de réussite avec mode sombre - Dispose d’effets réactifs et de la prise en charge du thème sombre. Aucun code JavaScript n’est nécessaire. Pour le mode sombre, la prise en charge CSS est suffisante.
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.