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
Composant Messages de réussite
Un composant de message de réussite complexe, réactif et compatible avec les thèmes sombres pour les applications de médias sociaux, doté d’un design 3D dynamique à l’aide de Tailwind CSS. Il comprend de multiples éléments interactifs.
Composant Messages de réussite
Un composant de messages de réussite réactif conçu dans un style skeuomorphique à l’aide de Tailwind CSS, fournissant la prise en charge des thèmes sombres.
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.