Composant Messages de réussite
Un composant qui affiche des messages de réussite audacieux avec un style de conception brutal, avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre.
HTML Code
<div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
<h2 class="text-2xl font-bold">Success!</h2>
</div>
<p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
<img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
<div class="mt-4">
<a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
</div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
<h2 class="text-2xl font-bold">Success!</h2>
</div>
<p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
<img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
<div class="mt-4">
<a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
</div>
</div>Composants associés
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.
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 réactif qui affiche des messages de réussite dans un style minimaliste, adapté à la présentation de travaux ou de produits avec prise en charge du thème sombre.