CCHub Logo CCHub Tailwind Collection
コンポーネント トースト通知 トースト通知

トースト通知

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

プレビュー

HTMLコード 

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

開ける

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

クリーンでミニマルなスイス/インターナショナルタイポグラフィスタイルでデザインされたトースト通知のセットで、類似の配色が特徴です。写真関連のWebサイト向けに最適化されており、ユーザーに明確で簡潔なフィードバックを提供します。レスポンシブデザインとダークモードのサポートが含まれています。

開ける

Retro_Vintage_Pastel_Finance_Toast_Notifications

レトロ/ビンテージの美的美学、パステル調の配色を備えた、複雑で応答性の高いトースト通知コンポーネントで、金融/銀行のインターフェイス用に設計されています。ダークモードのサポートと複数の通知タイプが含まれています。

開ける