Message d’alerte Glassmorphism
Composant de message d’alerte Glassmorphism avec une palette de couleurs triadique et une mise en page simple, conçu pour les portefeuilles, avec un design réactif et une prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-lg bg-opacity-30 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-30">
<div class="absolute inset-0 rounded-lg -z-10 bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 opacity-60 dark:from-blue-700 dark:via-purple-700 dark:to-pink-700"></div>
<div class="flex items-center space-x-4">
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 text-white bg-blue-500 rounded-full dark:bg-blue-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">New Portfolio Update!</h3>
<p class="text-sm text-gray-600 dark:text-gray-200">Check out my latest projects and redesigned sections. Your feedback is highly appreciated!</p>
</div>
</div>
<div class="flex justify-end mt-4">
<button class="px-4 py-2 text-sm font-medium text-blue-800 bg-blue-100 rounded-md bg-opacity-70 dark:text-blue-200 dark:bg-blue-700 dark:bg-opacity-70">View Details</button>
<button class="ml-2 px-4 py-2 text-sm font-medium text-gray-800 bg-gray-100 rounded-md bg-opacity-70 dark:text-gray-200 dark:bg-gray-700 dark:bg-opacity-70">Dismiss</button>
</div>
</div>
</div>Composants associés
Composant Messages d’alerte
Un composant de messages d’alerte réactif conçu dans un style minimaliste/plat avec une palette de couleurs pastel, adapté aux interfaces de médias sociaux, intégrant la prise en charge du thème sombre.
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.
Composant Messages d’alerte
Un composant de message d’alerte minimaliste conçu pour les blogs, avec une palette de couleurs en niveaux de gris. Il comprend un titre, un message et un bouton de fermeture. Conception réactive avec prise en charge du thème sombre.