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
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 di messaggi di avviso in stile Glassmorphism per la visualizzazione dei dati del cruscotto, con effetti di vetro smerigliato, colori complementari e design reattivo con supporto per temi scuri.
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.