Componente Messaggi di avviso
Un componente reattivo per i messaggi di avviso scheumorfici progettato per il consumo di blog/contenuti, con una combinazione di colori complementari e il supporto del tema scuro.
Codice HTML
<div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alert Title</h2>
</div>
<p class="text-gray-700 dark:text-gray-300">
This is a simple alert message that mimics real-world alert styles, using complementary colors for the design.
</p>
<div class="mt-4 flex justify-end">
<img src="https://picsum.photos/150/50?random" alt="Illustration" class="rounded-md shadow-md">
</div>
</div>Componenti correlati
Componente Messaggi di avviso
Un componente reattivo per i messaggi di avviso progettato con effetto glassmorphism per l'e-commerce. Presenta un layout semplice con una combinazione di colori monocromatica e il supporto della modalità oscura utilizzando Tailwind CSS.
Componente Messaggi di avviso
Un componente per i messaggi di avviso con un design 3D, funzionalità reattive e supporto per il tema scuro utilizzando Tailwind CSS. Il componente include diversi tipi di avviso (successo, errore, avviso, informazioni) con icone e messaggi.
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.