Toast Notifications

Brief, non-intrusive notifications

Toast Notifications Component

A responsive Toast Notifications component designed with Glassmorphism, featuring a monochromatic color scheme, dark mode support, and ready for use in a portfolio.

Open Preview

                <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>

Neumorphism Toast Notifications Component

Neumorphism Toast Notifications Component with responsive effects and dark theme support.

Open Preview

                

<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

Toast Notifications Component with Glassmorphism style, responsive effects, and dark theme support using Tailwind CSS

Open Preview

                <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>

Retro Toast Notifications Component

A retro-themed toast notification component with responsive design and dark mode support.

Open Preview

                <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>

Toast Notifications Component

A responsive Toast Notification component with Skeuomorphic design and dark mode support, built with Tailwind CSS.

Open Preview

                <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>

A Toast Notifications component designed with Glassmorphism style, featuring responsive effects and dark theme support. It uses Tailwind CSS for styling, along with placeholder images from picsum.photos for visuals and randomuser.me for avatars.

Open Preview

                <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>

Toast Notifications Component

A Neumorphism-style Toast Notifications component using Tailwind CSS with dark theme support.

Open Preview

                <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>

Categories

Toast Notifications

Toast Notifications Component

Neumorphism Toast Notifications Component

Toast Notifications

Retro Toast Notifications Component

Toast Notifications Component

Toast Notifications Component

Toast Notifications Component