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.
HTML Code
<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>Composants associés
Composant Messages de réussite
Un composant de messages de réussite de conception minimaliste / plate pour les médias sociaux avec des couleurs pastel claires et une mise en page réactive complexe.
Composant Messages de réussite
Un composant de messages de réussite réactif avec des éléments de conception 3D et la prise en charge du thème sombre, utilisant Tailwind CSS.
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.