トースト通知コンポーネント

Glassmorphism スタイル、アーストーンの配色、ダークモードをサポートするレスポンシブデザインのトースト通知コンポーネント。

プレビュー

HTMLコード

<div class="fixed bottom-4 right-4 z-50">
  <!-- Toast 1 -->
  <div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
    <div class="flex-shrink-0">
      <img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar1/40/40" alt="Avatar">
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">John Doe</p>
      <p class="text-xs">New message received.</p>
    </div>
    <button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg class="w-4 h-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>

  <!-- Toast 2 -->
  <div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
    <div class="flex-shrink-0">
      <img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar2/40/40" alt="Avatar">
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">Jane Smith</p>
      <p class="text-xs">Your report is ready.</p>
    </div>
    <button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg class="w-4 h-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>

  <!-- Toast 3 -->
  <div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg p-4 flex items-center text-gray-800 dark:text-gray-200">
    <div class="flex-shrink-0">
      <img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar3/40/40" alt="Avatar">
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">System Update</p>
      <p class="text-xs">Security patch applied.</p>
    </div>
    <button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg class="w-4 h-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>

トースト通知コンポーネント

プレビュー

HTMLコード

関連コンポーネント

トースト通知コンポーネント

Skeuomorphic パステルトーストの通知

Retro_Vintage_Pastel_Finance_Toast_Notifications