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.
Codice HTML
<div class="flex flex-col space-y-4 p-6">
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Alert Title</p>
<p class="text-gray-700 dark:text-gray-300">This is an alert message describing the issue at hand.</p>
</div>
<button class="bg-red-600 text-white p-2 rounded-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Information Alert</p>
<p class="text-gray-700 dark:text-gray-300">This is a piece of information to keep you updated.</p>
</div>
<button class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Okay</button>
</div>
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Success Alert</p>
<p class="text-gray-700 dark:text-gray-300">Your operation was successful! Great job!</p>
</div>
<button class="bg-green-600 text-white p-2 rounded-md hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600">Close</button>
</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.
Componente Messaggi di avviso
Questo componente è un messaggio di avviso con un design minimalista/piatto, una combinazione di colori dei toni della terra e un layout complesso. È progettato per le interfacce dei social media ed è reattivo con supporto per il tema scuro. Utilizza Tailwind CSS per lo stile e include più elementi interattivi.
Componente Messaggi di avviso
Un componente di messaggi di avviso reattivi in modalità oscura per mostrare notifiche o messaggi in un portfolio, progettato con toni della terra e molteplici elementi interattivi.