Componente Messaggi di avviso
Componente di messaggio di avviso in scala di grigi retrò / vintage per i social media con supporto per la modalità oscura
Codice HTML
<div class="flex flex-col space-y-4 p-4 bg-gray-100 dark:bg-gray-800">
<!-- Success Alert -->
<div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" 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" />
</svg>
<p class="text-sm font-mono">Success: Your post was published.</p>
</div>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Info Alert -->
<div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<p class="text-sm font-mono">Info: New messages available.</p>
</div>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Warning Alert -->
<div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4H21a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<p class="text-sm font-mono">Warning: Profile incomplete.</p>
</div>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Danger Alert -->
<div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="text-sm font-mono">Error: Failed to send message.</p>
</div>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>Componenti correlati
Componente Messaggi di avviso del Marketplace
Un componente di messaggi di avviso ispirato al Material Design con colori autunnali, adatto per piattaforme di marketplace. Presenta vari tipi di avviso (successo, avviso, errore, informazioni) con opzioni ignorabili e supporto per la modalità oscura.
Messaggio di avviso Glassmorphism
Glassmorphism Alert Message Component con una combinazione di colori triadica e un layout semplice, progettato per i portfolio, con design reattivo e supporto per la modalità scura.
Componente Messaggi di avviso
Un componente di messaggio di avviso semplice, reattivo e in scala di grigi per siti di e-commerce, con supporto per la modalità scura.