Composants Toast Notifications Composant Toast Notifications

Composant Toast Notifications

Un composant Toast Notifications réactif avec un style Glassmorphism et une palette de couleurs vives, adapté aux applications de commerce électronique. Il prend en charge le thème sombre et possède une interface complexe avec plusieurs éléments interactifs.

Aperçu

HTML Code

<div class="fixed inset-0 flex items-end justify-center p-4 space-y-4 z-50">
    <!-- Toast Notification -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700 overflow-hidden w-full max-w-sm">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="font-semibold text-vibrant-500 dark:text-vibrant-300">John Doe</p>
                <p class="text-gray-700 dark:text-gray-300">Your order has been shipped!</p>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-vibrant-500 dark:hover:text-vibrant-300">
                &times;
            </button>
        </div>
        <div class="p-4 border-t border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/400/200?random=1" alt="Product Image" class="w-full rounded-lg mb-2">
            <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name</p>
            <p class="text-gray-600 dark:text-gray-400">Price: $29.99</p>
            <button class="mt-2 w-full bg-vibrant-500 dark:bg-vibrant-400 text-white font-semibold hover:bg-vibrant-600 dark:hover:bg-vibrant-300 rounded-lg py-2">
                View Order
            </button>
        </div>
    </div>
</div>

<!-- Toast Notification (Alternate) -->
<div class="fixed inset-0 flex items-end justify-center p-4 space-y-4 z-50">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700 overflow-hidden w-full max-w-sm">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="font-semibold text-vibrant-500 dark:text-vibrant-300">Jane Smith</p>
                <p class="text-gray-700 dark:text-gray-300">You have a new message!</p>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-vibrant-500 dark:hover:text-vibrant-300">
                &times;
            </button>
        </div>
        <div class="p-4 border-t border-gray-200 dark:border-gray-700">
            <p class="font-semibold text-gray-800 dark:text-gray-200">Check your inbox for more details.</p>
            <button class="mt-2 w-full bg-vibrant-500 dark:bg-vibrant-400 text-white font-semibold hover:bg-vibrant-600 dark:hover:bg-vibrant-300 rounded-lg py-2">
                View Messages
            </button>
        </div>
    </div>
</div>

Composants associés

Toast Notifications

Composant de notifications toast réactives avec style Glassmorphism pour les sites Web d’entreprise/d’entreprise, prenant en charge le thème sombre. Palette de couleurs pastel.

Ouvrir

Composant Toast Notifications

Un composant Toast Notifications de style Neumorphism utilisant Tailwind CSS avec prise en charge du thème sombre.

Ouvrir

Notifications Toast rétro

Un composant de notifications Toast réactif avec un design rétro/vintage, une palette de couleurs triadique et une prise en charge du mode sombre, construit avec Tailwind CSS pour une utilisation en portefeuille.

Ouvrir