Catégories

Composants Toast Notifications

Toast Notifications

Notifications brèves et non intrusives

Composant Toast Notifications

Un composant Toast Notifications réactif conçu avec Glassmorphism, doté d’un schéma de couleurs monochromatique, d’une prise en charge du mode sombre et prêt à être utilisé dans un portefeuille.

Ouvrir l’aperçu

                <div class="fixed bottom-5 right-5 space-y-4 z-50">
    <!-- Toast Notification 1 -->
    <div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
            <div class="flex-1">
                <h2 class="text-gray-900 dark:text-gray-100 font-semibold">New Project Alert</h2>
                <p class="text-gray-700 dark:text-gray-300">You have successfully created a new project!</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">Just now</span>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
    </div>
    <!-- Toast Notification 2 -->
    <div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
            <div class="flex-1">
                <h2 class="text-gray-900 dark:text-gray-100 font-semibold">Portfolio Updated</h2>
                <p class="text-gray-700 dark:text-gray-300">Your portfolio has been successfully updated!</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 mins ago</span>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
    </div>
</div>

Composant de notifications toast Neumorphism

Neumorphism Toast Notifications Composant avec effets réactifs et prise en charge du thème sombre.

Ouvrir l’aperçu

                

<div class="flex items-center justify-center min-h-screen p-10">
  <div class="w-full max-w-sm mx-auto">
    <div class="flex items-center p-6 neumorphism-card rounded-xl">
      <div class="flex-shrink-0">
        <svg class="w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="ml-4">
        <p class="font-semibold text-gray-700 dark:text-gray-200">Success!</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your action was completed successfully.</p>
      </div>
    </div>

    <!-- Add more toast notifications as needed -->

  </div>
</div>

<style>
  /* Base styles for neumorphism effect */
  .neumorphism-card {
    background: linear-gradient(145deg, #e0e0e0, #ffffff);
    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  }

  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {
    .neumorphism-card {
      background: linear-gradient(145deg, #2c2c2c, #383838);
      box-shadow: 8px 8px 16px #232323, -8px -8px 16px #383838;
    }
  }

  /* Responsive adjustments */
  @media (max-width: 600px) {
    .neumorphism-card {
      padding: 1rem;
    }
  }
</style>

Toast Notifications

Composant Toast Notifications avec style Glassmorphism, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS

Ouvrir l’aperçu

                <div class="fixed bottom-0 right-0 mb-4 mr-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mx-auto" style="max-width: 300px;">
    <div class="flex items-center justify-between px-4 py-2">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        <p class="text-gray-700 dark:text-gray-200 text-sm font-semibold ml-2">User Name</p>
      </div>
      <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <div class="px-4 py-2">
      <p class="text-gray-600 dark:text-gray-300 text-sm">This is a toast notification.</p>
    </div>
  </div>
</div>

Composant Retro Toast Notifications

Un composant de notification toast à thème rétro avec un design réactif et une prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="fixed bottom-5 right-5 space-y-3">
  <!-- Success Toast -->
  <div class="bg-green-600 text-white p-4 rounded-lg shadow-lg font-mono text-sm animate-bounce">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>Success! Your operation was successful.</span>
      </div>
      <button class="ml-4 focus:outline-none">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-red-600 text-white p-4 rounded-lg shadow-lg font-mono text-sm animate-shake">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>Error! Something went wrong.</span>
      </div>
      <button class="ml-4 focus:outline-none">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Info Toast with Avatar -->
  <div class="bg-blue-600 text-white p-4 rounded-lg shadow-lg font-mono text-sm animate-fade-in">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <span>Info: A new message has arrived.</span>
      </div>
      <button class="ml-4 focus:outline-none">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Dark Mode Styles -->
  <style>
    @media (prefers-color-scheme: dark) {
      .dark .bg-green-600 {
        background-color: #059669;
      }
      .dark .bg-red-600 {
        background-color: #dc2626;
      }
      .dark .bg-blue-600 {
        background-color: #2563eb;
      }
      .dark .text-white {
        color: #d1d5db;
      }
    }

    /* Retro Animations */
    @keyframes bounce {
      0%, 100% {
        transform: translateY(-10%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
      20%, 40%, 60%, 80% { transform: translateX(10px); }
    }

    @keyframes fade-in {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    .animate-bounce {
      animation: bounce 1s infinite;
    }

    .animate-shake {
      animation: shake 0.5s infinite;
    }

    .animate-fade-in {
      animation: fade-in 0.5s ease-out;
    }

    
  </style>
</div>

Composant Toast Notifications

Un composant de notification Toast réactif avec un design skeuomorphique et une prise en charge du mode sombre, construit avec Tailwind CSS.

Ouvrir l’aperçu

                <div class="fixed bottom-5 right-5 space-y-3">
  <!-- Success Toast -->
  <div class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow-xl dark:bg-gray-700 dark:border-gray-700">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </div>
    <div class="ml-3 text-sm font-normal text-gray-800 dark:text-gray-200">
      Successfully saved your settings.
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600">
      <span class="sr-only">Close</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Error Toast -->
  <div class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow-xl dark:bg-gray-700 dark:border-gray-700">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </div>
    <div class="ml-3 text-sm font-normal text-gray-800 dark:text-gray-200">
      Something went wrong.
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600">
      <span class="sr-only">Close</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Warning Toast -->
  <div class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow-xl dark:bg-gray-700 dark:border-gray-700">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
    </div>
    <div class="ml-3 text-sm font-normal text-gray-800 dark:text-gray-200">
      Proceed with caution.
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600">
      <span class="sr-only">Close</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>
</div>

Un composant Toast Notifications conçu avec le style Glassmorphism, avec des effets réactifs et la prise en charge des thèmes sombres. Il utilise Tailwind CSS pour le style, ainsi que des images de remplacement de picsum.photos pour les visuels et randomuser.me pour les avatars.

Ouvrir l’aperçu

                <div class="fixed bottom-5 right-5 space-y-3">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Notification Title</p>
                <p class="text-white text-sm">This is a toast notification message to inform you about something important.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Action</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Another Notification</p>
                <p class="text-white text-sm">This is another toast notification message for your consideration.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Dismiss</button>
        </div>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .text-white {
        color: white;
    }
    .border-white {
        border-color: rgba(255, 255, 255, 0.3);
    }
}
</style>

Composant Toast Notifications

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

Ouvrir l’aperçu

                <div class="fixed top-5 right-5 space-y-4">
    <!-- Success Toast -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-200 font-semibold">Success!</p>
            <p class="text-gray-600 dark:text-gray-400">Your changes have been saved successfully.</p>
        </div>
        <button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <!-- Error Toast -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="text-red-600 dark:text-red-400 font-semibold">Error!</p>
            <p class="text-gray-600 dark:text-gray-400">There was an issue processing your request.</p>
        </div>
        <button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <!-- Info Toast -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="text-blue-600 dark:text-blue-400 font-semibold">Info!</p>
            <p class="text-gray-600 dark:text-gray-400">This is an informational message.</p>
        </div>
        <button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>
</div>

<style>
    /* Neumorphism Styles */
    .bg-white {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
                    -8px -8px 15px rgba(255, 255, 255, 0.9);
    }
    .dark .bg-gray-800 {
        box-shadow: inset 8px 8px 15px rgba(0, 0, 0, 0.5),
                     inset -8px -8px 15px rgba(255, 255, 255, 0.1);
    }
</style>