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
Composant Messages d’alerte
Ce composant est un message d’alerte avec un design minimaliste/plat, une palette de couleurs de tons de terre et une mise en page complexe. Il est conçu pour les interfaces de médias sociaux et est réactif avec la prise en charge du thème sombre. Il utilise Tailwind CSS pour le style et comprend plusieurs éléments interactifs.
Composant Messages d’alerte
Un composant de messages d’alerte réactif en mode sombre pour présenter des notifications ou des messages dans un portfolio, conçu avec des tons de terre et plusieurs éléments interactifs.
Composant Messages d’alerte
Un composant simple de message d’alerte de style Neumorphism pour les sites Web d’entreprise, avec des couleurs vives et une prise en charge réactive du thème sombre à l’aide de Tailwind CSS et sans JavaScript.