Composant Messages d’alerte
Composant de message d’alerte réactif avec micro-interactions, palette de couleurs pastel, conception complexe, objectif commercial/d’entreprise, prise en charge du mode sombre et pas de JavaScript.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-8 w-8 text-teal-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-4">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Message Sent Successfully</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your message has been sent to the recipient. We will notify you when they respond.</p>
</div>
</div>
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-teal-400 text-base font-medium text-white hover:bg-teal-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:col-start-2 sm:text-sm">
Dismiss
</button>
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:mt-0 sm:col-start-1 sm:text-sm">
Learn More
</button>
</div>
</div>
</div> Achilles</div>Composants associés
Message d’alerte Glassmorphism
Composant réactif Glassmorphism Alert Message pour un site de commerce électronique, avec prise en charge du mode sombre et un schéma de couleurs analogue, construit avec Tailwind CSS.
Composant Messages d’alerte
Un composant de messages d’alerte skeuomorphe réactif conçu pour la consommation de blogs/contenus, avec une palette de couleurs complémentaires et la prise en charge du thème sombre.
Playful_Alert_Messages_Component
Un composant de messages d’alerte ludique et professionnel pour les plateformes musicales/audio, avec des tons bleus d’entreprise, des éléments arrondis et une réactivité totale avec prise en charge du mode sombre.