検索コンポーネント

カテゴリ

トースト通知

短く、邪魔にならない通知

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

ダッシュボード用の複雑な glassmorphism スタイルのトースト通知コンポーネントで、半透明の要素、ぼかし効果、および類似の配色が特徴です。ダークモードのサポートにより完全にレスポンシブ。

                <div class="fixed inset-0 z-50 flex flex-col items-end justify-start p-4 space-y-4 pointer-events-none sm:p-6 md:p-8">
  <!-- Success Toast -->
  <div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-emerald-500 dark:text-emerald-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>
    <div class="ml-3 w-0 flex-1 pt-0.5">
      <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Success!</p>
      <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Your changes have been saved successfully.</p>
      <div class="mt-4 flex space-x-7">
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:text-emerald-500 dark:hover:text-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          View Changes
        </button>
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Dismiss
        </button>
      </div>
    </div>
    <div class="ml-4 flex flex-shrink-0">
      <button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Warning Toast -->
  <div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-amber-500 dark:text-amber-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.021 3.373 1.865 3.373h14.47c1.844 0 2.733-1.873 1.865-3.373L13.723 3.535c-.863-1.5-2.913-1.5-3.776 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
      </svg>
    </div>
    <div class="ml-3 w-0 flex-1 pt-0.5">
      <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Heads up!</p>
      <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Your session is about to expire. Please re-authenticate.</p>
      <div class="mt-4 flex space-x-7">
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-amber-600 dark:text-amber-400 hover:text-amber-500 dark:hover:text-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Renew Session
        </button>
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Later
        </button>
      </div>
    </div>
    <div class="ml-4 flex flex-shrink-0">
      <button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-rose-500 dark:text-rose-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9.303-9.303a2.25 2.25 0 00-3.182 0l-10.101 10.101a2.25 2.25 0 000 3.182L10.96 21.04a2.25 2.25 0 003.182 0L21.04 10.96a2.25 2.25 0 000-3.182zM15.75 14.75h.007v.008H15.75v-.008z" />
      </svg>
    </div>
    <div class="ml-3 w-0 flex-1 pt-0.5">
      <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Error!</p>
      <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Failed to load data. Please try again later.</p>
      <div class="mt-4 flex space-x-7">
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-rose-600 dark:text-rose-400 hover:text-rose-500 dark:hover:text-rose-300 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Retry
        </button>
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Support
        </button>
      </div>
    </div>
    <div class="ml-4 flex flex-shrink-0">
      <button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>
</div>

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

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

開けるプレビュー

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

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

パステルカラー、レスポンシブデザイン、ダークテーマのサポートを備えたニューモーフィックトースト通知コンポーネントで、ブログやコンテンツサイトに適しています。

開けるプレビュー

                <div class="fixed bottom-5 right-5 z-50">
  <!-- Toast Notification 1 -->
  <div class="neumorphic-toast p-4 mb-3 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <img class="h-10 w-10 rounded-full" src="https://api.lorem.space/image/face?w=120&h=120" alt="Avatar">
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">John Doe commented on your post.</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">"Great article, very insightful!"</p>
      </div>
    </div>
  </div>

  <!-- Toast Notification 2 -->
  <div class="neumorphic-toast p-4 mb-3 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" 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-3">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Successfully saved your draft.</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your changes have been automatically saved.</p>
      </div>
    </div>
  </div>

  <!-- Toast Notification 3 -->
  <div class="neumorphic-toast p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Error: Unable to publish post.</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Please check your internet connection.</p>
      </div>
    </div>
  </div>
</div>

<style>
  .neumorphic-toast {
    background-color: #e0e5ec; /* Light pastel background */
  }

  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b8bcc4, -6px -6px 12px #ffffff;
  }

  .dark .neumorphic-toast {
    background-color: #2c2f33; /* Dark pastel background */
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #232528, -6px -6px 12px #35393e;
  }

  /* Responsive adjustments */
  @media (max-width: 640px) {
    .neumorphic-toast {
      margin-left: 1rem;
      margin-right: 1rem;
    }
  }
</style>

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

Tailwind CSS を使用したブルータリストスタイルのトースト通知コンポーネントで、作業や製品を紹介するポートフォリオ用に設計されています。このデザインには類似の配色が組み込まれており、複雑なインターフェースを備えたダークモードをサポートしています。

開けるプレビュー

                <div class="fixed top-4 right-4 z-50 space-y-4">
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-red-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Notification Title</h2>
                <p class="text-sm">This is a sample toast notification message that showcases important updates or alerts.</p>
            </div>
            <button class="ml-2 p-2 text-sm text-red-500 hover:bg-red-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-yellow-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Another Notification</h2>
                <p class="text-sm">This is another toast notification that provides insights or next steps for users.</p>
            </div>
            <button class="ml-2 p-2 text-sm text-yellow-500 hover:bg-yellow-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-blue-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Success Notification</h2>
                <p class="text-sm">Your latest action was successful. Keep up the great work!</p>
            </div>
            <button class="ml-2 p-2 text-sm text-blue-500 hover:bg-blue-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
</div>

トースト通知

レスポンシブでダークテーマと互換性のあるトースト通知コンポーネントで、Eコマース向けのミニマリスト/フラットデザインで、補色スキームを使用しています。

開けるプレビュー

                <div class="fixed bottom-4 right-4 space-y-2">

  <!-- Success Toast (Example) -->
  <div class="bg-green-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-green-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-6 w-6 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"></path>
        </svg>
        <div>
          <p class="font-bold">Success!</p>
          <p class="text-sm">Item added to cart successfully.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Error Toast (Example) -->
  <div class="bg-red-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-red-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-6 w-6 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 2l7-7m0 0l7 7m0-7l-7 7m7-7L7 7"></path>
        </svg>
        <div>
          <p class="font-bold">Error!</p>
          <p class="text-sm">Failed to add item to cart.</p>
        </div>
      </div>
    </div>
  </div>

    <!-- Info Toast (Example) -->
  <div class="bg-blue-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-blue-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
       <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4H12a9 9 0 007.562-3.438 9 9 0 000-10.124A9 9 0 0012 3a9 9 0 00-7.562 3.438A9 9 0 004.062 12a9 9 0 003.438 7.562z"></path>
        </svg>
        <div>
          <p class="font-bold">Info!</p>
          <p class="text-sm">Your item is being processed.</p>
        </div>
      </div>
    </div>
  </div>


</div>

トースト通知

ビジネス/企業Webサイト用のGlassmorphismスタイルのレスポンシブトースト通知コンポーネント、ダークテーマをサポートします。パステルカラーの配色。

開けるプレビュー

                <div class="fixed bottom-5 right-5 space-y-4 z-50">

  <!-- Success Toast -->
  <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-3">
      <div class="flex-shrink-0">
        <svg class="h-6 w-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="flex-1">
        <p class="text-sm font-medium text-gray-900 dark:text-white">Success Message</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Your action was successful.</p>
      </div>
    </div>
  </div>

  <!-- Info Toast -->
  <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-3">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-blue-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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div class="flex-1">
        <p class="text-sm font-medium text-gray-900 dark:text-white">Information</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">This is an informational message.</p>
      </div>
    </div>
  </div>

  <!-- Warning Toast -->
  <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-3">
      <div class="flex-shrink-0">
        <svg class="h-6 w-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 4H21a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
      </div>
      <div class="flex-1">
        <p class="text-sm font-medium text-gray-900 dark:text-white">Warning</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Something might be wrong.</p>
      </div>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-3">
      <div class="flex-shrink-0">
        <svg class="h-6 w-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="flex-1">
        <p class="text-sm font-medium text-gray-900 dark:text-white">Error</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">An error occurred.</p>
      </div>
    </div>
  </div>

</div>

レトロなトースト通知

レトロ/ビンテージデザイン、トライアドカラースキーム、ダークモードのサポートを備えたレスポンシブトースト通知コンポーネントで、ポートフォリオ用に Tailwind CSS で構築されています。

開けるプレビュー

                <div class="fixed bottom-5 right-5 space-y-4">
  <!-- Success Toast -->
  <div class="bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <svg class="w-6 h-6" 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="font-bold">Success!</div>
      <div class="text-sm">Item successfully added.</div>
    </div>
  </div>

  <!-- Info Toast -->
  <div class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <svg class="w-6 h-6" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Information</div>
      <div class="text-sm">Your request is being processed.</div>
    </div>
  </div>

  <!-- Warning Toast -->
  <div class="bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <svg class="w-6 h-6" 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="font-bold">Warning!</div>
      <div class="text-sm">Some issues were found.</div>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <svg class="w-6 h-6" 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="font-bold">Error!</div>
      <div class="text-sm">Action could not be completed.</div>
    </div>
  </div>
</div>

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

Glassmorphism スタイルと鮮やかな配色を備えたレスポンシブな Toast Notifications コンポーネントで、e コマースアプリケーションに適しています。ダークテーマをサポートし、複数のインタラクティブ要素を備えた複雑なインターフェイスを備えています。

開けるプレビュー

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

トースト通知

ミニマリスト/フラットデザインのトースト通知コンポーネント、類似の配色、シンプルな複雑さ、ポートフォリオの目的。ダークテーマのサポートによるレスポンシブ。

開けるプレビュー

                <div class="fixed bottom-4 right-4 space-y-2">
  <!-- Success Toast -->
  <div class="bg-green-500 dark:bg-green-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
    <div class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <p class="font-bold">Success!</p>
      <p>Your action was completed successfully.</p>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-red-500 dark:bg-red-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
    <div class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586l-1.293-1.293z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <p class="font-bold">Error!</p>
      <p>Something went wrong. Please try again.</p>
    </div>
  </div>

  <!-- Info Toast -->
  <div class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
    <div class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <p class="font-bold">Information</p>
      <p>This is an informational message.</p>
    </div>
  </div>
</div>

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

Tailwind CSS を使用したミニマリストで活気に満ちたトースト通知コンポーネント。このコンポーネントは、ポートフォリオ用のシンプルなレイアウトで設計されており、ダークモードをサポートし、JavaScript なしでレスポンシブです。

開けるプレビュー

                <div class="fixed bottom-5 right-5 space-y-4">
  <!-- Toast Notification -->
  <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md flex items-center justify-between">
    <div class="flex items-center">
      <div class="flex-shrink-0 bg-green-500 rounded-full p-1">
        <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-800 dark:text-white">Success!</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Your action was successful.</p>
      </div>
    </div>
    <button class="ml-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
      <svg class="h-5 w-5" 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"></path>
      </svg>
    </button>
  </div>

  <!-- Another Toast Notification (Example) -->
  <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md flex items-center justify-between">
    <div class="flex items-center">
      <div class="flex-shrink-0 bg-blue-500 rounded-full p-1">
        <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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">
        <p class="text-sm font-medium text-gray-800 dark:text-white">Info</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">This is an informational message.</p>
      </div>
    </div>
    <button class="ml-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
      <svg class="h-5 w-5" 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"></path>
      </svg>
    </button>
  </div>
</div>