Componente Messaggi di avviso
Un componente reattivo per i messaggi di avviso progettato in uno stile minimalista/piatto con una combinazione di colori pastello, adatto per le interfacce dei social media, che incorpora il supporto per il tema scuro.
Codice HTML
<div class="max-w-md mx-auto mt-5">
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h2 class="text-gray-800 dark:text-white text-lg font-medium">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Just now</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-300">This is a simple alert message for your social media interface.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden mt-4">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h2 class="text-gray-800 dark:text-white text-lg font-medium">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">5 minutes ago</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-300">Another alert message from the social networking interface!</p>
</div>
</div>
</div>
Componenti correlati
Componente Messaggi di avviso
Componente dei messaggi di avviso con stile Material Design, combinazione di colori pastello e livello di complessità complesso, per scopi di portfolio. Design reattivo con supporto per temi scuri. Non è necessario alcun codice JavaScript, solo HTML con le classi Tailwind. La modalità oscura utilizza il prefisso dark: di Tailwind per lo stile. Le immagini utilizzano picsum.photos per le immagini e randomuser.me per gli avatar.
Messaggio di avviso Glassmorphism
Componente Glassmorphism Alert Message reattivo per un sito di e-commerce, con supporto alla modalità scura e una combinazione di colori analoga, costruito con Tailwind CSS.
Componente Messaggi di avviso
Un componente complesso e reattivo per i messaggi di avviso progettato secondo i principi del Material Design, utilizzando toni oceano/blu, adatto per siti web senza scopo di lucro/beneficenza. Include più tipi di avviso, funzionalità di chiusura e supporto per la modalità oscura.