Composant Messages d’alerte
Composant Messages d’alerte avec le style Material Design, la palette de couleurs pastel et le niveau de complexité complexe, à des fins de portefeuille. Conception réactive avec prise en charge du thème sombre. Pas besoin de code JavaScript, seulement du HTML avec des classes Tailwind. Le mode sombre utilise le préfixe dark : de Tailwind pour le coiffage. Images Utilisez picsum.photos pour les images et randomuser.me pour les avatars.
HTML Code
<div class="container mx-auto p-4">
<!-- Success Alert -->
<div class="flex items-center bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
<p class="text-sm">Success! Your action was completed.</p>
</div>
<!-- Info Alert -->
<div class="flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
<p class="text-sm">Information: This is an important message.</p>
</div>
<!-- Warning Alert -->
<div class="flex items-center bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
<p class="text-sm">Warning: Something needs your attention.</p>
</div>
<!-- Danger Alert -->
<div class="flex items-center bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 px-4 py-3 rounded shadow-md" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94z"/></svg>
<p class="text-sm">Error: Something went wrong.</p>
</div>
</div>Composants associés
Composant Messages d’alerte
Un composant de messages d’alerte de style Glassmorphism pour la visualisation des données du tableau de bord, avec des effets de verre givré, des couleurs complémentaires et un design réactif avec prise en charge du thème sombre.
Alerte Forêt Ludique
Un composant de messages d’alerte ludique et joyeux conçu avec une palette forêt/vert, des éléments arrondis et une esthétique conviviale, adapté aux sites Web d’entreprise/d’entreprise. Il est réactif et prend en charge le mode sombre.
Composant Messages d’alerte
Un composant de messages d’alerte minimaliste et dynamique pour les sites Web d’entreprise, avec un design réactif et une prise en charge du mode sombre. Il comprend différents types d’alertes telles que succès, erreur, informations et avertissement.