Messages de réussite Composante 17
Un composant de messages de réussite audacieux et bruts conçu avec Tailwind CSS avec des effets réactifs et la prise en charge des thèmes sombres.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full border-2 border-green-500 mr-3">
<h2 class="text-xl font-bold text-green-700 dark:text-green-400">Success!</h2>
</div>
<p class="text-gray-700 dark:text-gray-300">
Your operation was completed successfully. Check your account for the latest updates!
</p>
<div class="flex justify-end mt-4">
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Close
</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white {
background-color: #2D3748;
}
.text-gray-700 {
color: #E2E8F0;
}
}
</style>Composants associés
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.
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.
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.