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.
HTML Code
<div class="flex items-center justify-center h-screen bg-zinc-950">
<div class="relative px-4 py-3 pr-10 text-teal-500 bg-teal-900 rounded-lg shadow-md" role="alert">
<strong class="font-bold select-none">Success!</strong>
<span class="block sm:inline select-none">Your action was successful.</span>
<span class="absolute top-0 bottom-0 right-0 flex items-center px-4 py-3">
<svg class="w-6 h-6 fill-current" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<title>Close</title>
<path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15L6.342 6.342a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
</svg>
</span>
</div>
</div>Composants associés
SkeuomorphismSuccessMessage
Message de réussite du skeuomorphisme pour le tableau de bord, complexe avec couleurs complémentaires et mode sombre
Composant Messages de réussite
Composant de messages de réussite réactifs avec prise en charge du mode sombre et style Glassmorphism pour le commerce électronique.
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.