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
Un composant permettant d’afficher des messages de réussite avec un style de conception 3D, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Messages de réussite
Il s’agit d’un composant complexe de messages de réussite inspiré du Material Design pour les applications de médias sociaux, avec des couleurs analogues, une réactivité et une prise en charge du mode sombre.
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.