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 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 message de réussite simple et propre avec un design réactif et une prise en charge du mode sombre.
Composant Messages de réussite
Un composant de messages de réussite réactif inspiré du Material Design avec prise en charge des tons de terre et du thème sombre, conçu pour la consommation de contenu.