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

トースト通知

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

プレビュー

HTMLコード 

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

関連コンポーネント

Retro_Vintage_Pastel_Finance_Toast_Notifications

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

開ける

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

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

開ける

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

パステルカラーの Glassmorphism スタイルの Toast Notifications コンポーネントは、ブログやコンテンツの消費用に設計されています。ダークモードをサポートし、インタラクティブな要素を備えた豊富なインターフェースを備えています。

開ける